@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap");

@layer base {
  html {
    font-family: "Cabin", "Tahoma", "Verdana", ui-sans-serif;
  }
}

:host {
  color: white;
  line-height: 1.5rem;
  font-size: 1rem;
  font-family: "Cabin", sans-serif;

  /* For Firefox */
  * {
    scrollbar-width: thin; /* Makes scrollbar thinner */
    scrollbar-color: rgba(33, 25, 81, 0.1) transparent; /* Thumb and track colors */
  }

  /* For WebKit Browsers (Chrome, Edge, Safari) */
  ::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(33, 25, 81, 0.1); /* Light transparent color */
    border-radius: 10px; /* Rounded edges */
  }

  ::-webkit-scrollbar-track {
    background: transparent; /* No background */
  }
}

@layer components {
  .x-border {
    @apply border border-solid border-background_secondary border-opacity-10;
  }

  .swapper-sdk-tx-status {
    @apply fixed bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
  }

  .horizontal-separator {
    @apply h-0.5 bg-background_tertiary/10 w-full;
  }

  .vertical-separator {
    @apply w-0.5 bg-background_tertiary/60 h-full;
  }

  .token-picker-container {
    @apply flex gap-3 p-4 items-center cursor-pointer hover:bg-background_tertiary/5;
  }
}

/* override notistack position */
.SnackbarContainer-top,
.notistack-SnackbarContainer {
  top: 100px !important;
}

.swapper-spinner {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 3px solid #0000;
  border-radius: 50%;
  border-right-color: #15f5ba;
  animation: l15 1s infinite linear;
}
.swapper-spinner::before,
.swapper-spinner::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.swapper-spinner::before {
  border-right-color: var(--swapper-primary-color);
}

.swapper-spinner::after {
  border-right-color: var(--swapper-card-bg);
}

.swapper-spinner::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15 {
  100% {
    transform: rotate(1turn);
  }
}