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

:host {
  color: white;
  line-height: 1.5rem;
  font-size: 1rem;

  /* Works on Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--bg-tertiary) 15%, transparent)
      var(--bg-primary);
  }

  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 4px;
  }

  *::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
  }

  *::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--bg-tertiary) 15%, transparent);
    border-radius: 4px;
  }
}

@layer components {
  .gradient-sections-separator-container {
    @apply bg-gradient-to-r from-transparent via-t_bg_tertiary/25 to-transparent;
  }

  .x-border {
    @apply border border-solid border-t_text_primary 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;
  }

  .selected-chain-item {
    @apply bg-t_bg_tertiary bg-opacity-5 border-t_text_primary border-opacity-10 rounded-2xl;
  }

  .disabled-chain-item {
    @apply bg-t_bg_tertiary bg-opacity-10 border-opacity-10 rounded-2xl opacity-70;
  }

  .selected-wallet-item {
    @apply bg-t_bg_tertiary bg-opacity-10 border-t_text_primary border-opacity-10 rounded-2xl;
  }
  .horizontal-separator {
    @apply h-0.5 bg-t_bg_tertiary bg-opacity-10 w-full;
  }

  .vertical-separator {
    @apply w-0.5 bg-t_bg_tertiary bg-opacity-60 h-full;
  }

  .token-picker-container {
    @apply flex gap-3 py-2 px-4 items-center cursor-pointer hover:bg-t_bg_tertiary hover:bg-opacity-5;
  }

  .btn {
    @apply bg-transparent m-0 appearance-none border-none text-sm relative z-[1] text-white whitespace-nowrap;
  }

  .btn:hover {
    @apply cursor-pointer;
  }

  .btn-disabled {
    @apply opacity-50 text-white hover:cursor-not-allowed;
  }

  .btn-small {
    @apply h-[26px] leading-[26px];
  }

  .btn-medium {
    @apply h-[32px] leading-[32px];
  }

  .btn-large {
    @apply h-[42px] leading-[42px];
  }

  .btn-contained {
    @apply text-center border-2 border-[#375bd2] bg-white text-[#375bd2] rounded-xl px-8 hover:bg-[#375bd2] hover:text-white;
  }

  .btn-contained:before {
    @apply content-[''] absolute transition-all duration-300 ease-out shadow-[0_0_4px_0_rgba(102,204,154,0.7)] rounded-xl bg-t_theme_color w-[calc(100%+4px)] h-[calc(100%+4px)] top-[-2px] left-[-2px] -z-[1] opacity-0;
  }

  .btn-contained-disabled {
    @apply text-center opacity-50 bg-[#626262] text-white rounded-xl px-8;
  }

  .btn-outlined {
    @apply text-center text-white rounded-xl border border-white/20 px-8 hover:before:opacity-100;
  }

  .btn-outlined:before {
    @apply content-[''] absolute transition-all duration-300 ease-out rounded-xl border-2 border-secondary-active w-full h-full top-[-2px] left-[-2px] -z-[1] opacity-0;
  }

  .btn-outlined-disabled {
    @apply text-center opacity-50 border border-white/20 text-white rounded-xl px-8;
  }

  .btn--full-width {
    @apply w-full;
  }

  .btn-default {
    @apply px-8;
  }

  .btn-filled-rounded {
    @apply flex items-center justify-center rounded-full text-white px-8 cursor-pointer whitespace-nowrap bg-t_theme_color;
  }

  .btn-filled-squared {
    @apply flex items-center justify-center rounded-lg text-white px-8 cursor-pointer whitespace-nowrap bg-t_theme_color;
  }

  .btn-filled-rounded-secondary {
    @apply flex items-center justify-center rounded-full text-white px-8 cursor-pointer whitespace-nowrap border border-blue;
  }

  .btn-filled-rounded-disabled {
    @apply flex items-center justify-center opacity-50 border border-white/20 text-white bg-dark-grey rounded-full px-8 hover:cursor-not-allowed;
  }
}

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