@tailwind base;
@tailwind components;
@tailwind utilities;

/* Use this directive to control where Tailwind injects the responsive variations of each utility */
/* If omitted, Tailwind will append these classes to the very end of your stylesheet by default */
@tailwind screens;

/* Add styles to the base styles: https://tailwindcss.com/docs/adding-base-styles */
@layer base {
  #app {
    @apply text-grey-500; /* Default font color */
    @apply text-sm md:text-md lg:text-lg xl:text-xl 2xl:text-xxl;
    @apply font-sans;
    font-kerning: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }

  h1 {
    @apply text-headline;
  }

  /********* INPUT STYLES  */

  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  [multiple],
  textarea,
  select {
    @apply w-full p-4 border border-grey-400;
    @apply hover:border-grey-500;
    @apply focus:outline-none focus:border-grey-500 focus:ring-0;
    font-size: 100%;
  }

  /********* NOTIFICATION STYLES */

  .bn-notify-custom {
    margin-left: 0px;
  }

  /*container holding all of the notifications*/
  .bn-notify-custom .bn-notify-notification {
    font-family: Source Code Pro, monospace;
    border-radius: 0px !important;
    padding-left: 0px;
    padding-bottom: 10px;
    font-size: 80%;
    line-height: 130%;
    @apply bg-grey-500 text-white;
    display: block;
  }

  .bn-notify-custom .bn-notify-notification::after {
    padding-left: 1em;
    content: "_";
    @apply text-white;
    animation: blink-animation 700ms infinite;
  }

  @keyframes blink-animation {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  /* icons  */
  .bn-notify-custom .bn-notify-notification-status-icon {
    display: none;
  }

  /********* WALLET MODAL STYLES */

  /*The full page modal container*/
  .bn-onboard-custom.bn-onboard-modal {
    font-family: Source Code Pro, monospace;
    @apply bg-white bg-opacity-90 font-normal;
  }

  /*The container for the modal content*/
  .bn-onboard-custom.bn-onboard-modal-content {
    @apply border-2 border-grey-500 rounded-none px-6 py-6;
  }

  /*The header of the modal*/
  .bn-onboard-custom.bn-onboard-modal-content-header {
    @apply mb-0;
  }

  /*The heading within the header*/
  .bn-onboard-custom.bn-onboard-modal-content-header-heading {
    @apply font-medium m-0;
    font-size: 100%;
  }

  .bn-onboard-custom.bn-onboard-modal-content-header-icon {
    display: none;
  }
}

/* Add styles to components */
@layer components {
  .text-indent {
    text-indent: 1em;
  }

  .link {
    @apply border-b border-grey-500 text-grey-500 hover:text-grey-400 hover:border-grey-400 cursor-pointer;
  }

  .btn {
    @apply flex items-center gap-2 whitespace-nowrap uppercase font-medium bg-grey-500 text-white px-8 py-4 hover:bg-grey-400;
  }

  .btn.disabled {
    @apply bg-grey-200 hover:bg-grey-200 cursor-not-allowed;
  }

  .btn svg {
    @apply stroke-3 stroke-white object-contain h-6 w-6 md:h-8 md:w-8;
  }

  .btn.spinner svg {
    animation: rotate 1s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* Add styles to utilities */
@layer utilities {
  .icon,
  .icon-small,
  .icon-large {
    @apply stroke-2 object-contain;
  }

  .icon {
    @apply h-10 w-10 md:h-14 md:w-14;
  }

  .icon-small {
    @apply h-6 w-6 md:h-10 md:w-10;
    object-fit: contain;
  }

  .icon-large {
    @apply h-16 w-16 md:h-20 md:w-20;
    object-fit: contain;
  }

  .icon-primary {
    @apply stroke-grey-400 group-hover:stroke-grey-500 hover:stroke-grey-500;
  }

  .icon-secondary {
    @apply stroke-teal;
  }

  .icon-heavy {
    @apply stroke-4;
  }

  .btn {
    @apply flex items-center justify-center gap-x-2 whitespace-nowrap uppercase font-medium bg-grey-500 text-white px-8 py-4 hover:bg-grey-400;
  }

  .btn svg {
    @apply stroke-3 stroke-white object-contain h-6 w-6;
  }

  .btn.in-cart {
    @apply bg-teal hover:bg-teal opacity-100;
  }

  .base-grid {
    @apply px-4 md:px-12 py-12 grid gap-x-12 gap-y-12;
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  .base-grid-big {
    @apply px-4 md:px-12 py-12 grid gap-x-12 gap-y-12;
    @apply grid-cols-1 lg:grid-cols-2;
  }

  .base-grid-large {
    @apply px-4 md:px-12 py-12 grid gap-x-12 gap-y-12;
    @apply grid-cols-1 lg:grid-cols-1;
  }
}
