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

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@layer components {
  :root:has(:is(.modal--open, .modal:target, .modal[open])) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  /* .skeleton { */
  /*   @apply bg-gradient-to-r from-gray-50 to-gray-100; */
  /*   /1* background: linear-gradient(90deg, #eee, #f9f9f9, #eee); *1/ */
  /*   animation: leftToRight 1.5s infinite reverse; */
  /*   background-size: 200%; */
  /* } */


  /* @keyframes leftToRight { */
  /*   0% { */
  /*     background-position: -100% 0; */
  /*   } */

  /*   100% { */
  /*     background-position: 100% 0; */
  /*   } */
  /* } */


  /* .skeleton { */
  /*   @apply bg-gray-300; */
  /*   will-change: background-position; */
  /*   animation: skeleton 1.8s ease-in-out infinite; */
  /*   @apply bg-gradient-to-r from-transparent via-gray-100 via-50% to-transparent to-60%; */
  /*   @apply bg-no-repeat; */
  /*   background-size: 200% auto; */
  /*   background-position-x: -50%; */
  /* } */
  /* @media (prefers-reduced-motion) { */
  /*   .skeleton { */
  /*     animation-duration: 15s; */
  /*   } */
  /* } */
  /* @keyframes skeleton { */
  /*   from { */
  /*     background-position: 150%; */
  /*   } */
  /*   to { */
  /*     background-position: -50%; */
  /*   } */
  /* } */


  .loader {
    @apply w-fit font-mono text-base font-bold;
    clip-path: inset(0 3ch 0 0);
    animation: l4 2s steps(4) infinite;
  }
  .loader:before {
    content:"Generating..."
  }
  @keyframes l4 {
    to {
      clip-path: inset(0 -1ch 0 0)
    }
  }

  .btn {
    @apply animate-none;
  }

  .btn-sm {
    & > svg {
      @apply size-5;
    }
  }

  .btn-xs {
    & > svg {
      @apply size-4;
    }
  }

  .btn-rainbow {
    @apply text-white;
    @apply bg-gradient-to-l from-secondary to-primary;
    @apply hover:from-secondary/90 hover:to-primary/90;
  }

  .modal {
    @apply fixed inset-0 overscroll-contain bg-transparent;
    @apply size-full m-0 p-6;
    @apply max-w-none max-h-none;

    &::backdrop {
      @apply bg-black/30;
    }
  }

  .modal[open] {
    @apply flex justify-center items-center;
    @apply animate-fadein;
  }

  .modal[closing] {
    @apply animate-fadeout;
  }

  .modal__box {
    @apply w-full;
    @apply relative p-8;
    @apply overscroll-contain bg-white rounded-lg shadow-lg;
  }

  .modal--full {
    @apply size-full;
    @apply m-0 p-0;

    & > .modal__box {
      @apply w-full h-full;
      @apply rounded-none shadow-none;
    }
  }

  /* label[required] { */
  /*   @apply after:content-['_*']; */
  /* } */

  .field {
    @apply grid gap-1;
  }

  /* input + label { */
  /*   @apply mb-1; */
  /* } */

  .field_with_errors {
    & label {
      @apply text-red-500;
    }

    & input {
      @apply border-red-500 bg-red-100;

      &:focus {
        @apply border-red-500 ring-red-500;
      }
    }
  }

  .note {
    /* @apply px-1 py-2 text-sm bg-yellow-400 inline-flex justify-center items-center text-center max-w-32; */
    @apply relative bg-yellow-400 flex justify-center items-center;
    @apply w-full h-full min-h-16;
    /* @apply min-w-[20%] max-w-[30%]; */
    /* container-type: inline-size; */

    & span {
      @apply p-2 overflow-hidden line-clamp-3 text-center;
      /* font-size: 15cqw; */
      /* line-height: 1.2; */
    }
  }

  .canvas {
    @apply gap-1 bg-black;
    @apply border-4 border-black;
  }

  .canvas--elephant {
    @apply grid grid-cols-4 grid-rows-3 items-stretch;

    & > section {
      @apply bg-base-100;
      @apply flex flex-col;

      & > header {
        @apply border-b;
      }

      & > div {
        @apply grow grid gap-1 bg-base-200;

        & > div,
        & > a {
          @apply bg-base-100;

          &.active {
            @apply bg-accent;
          }
        }

        & > a {
          @apply hover:bg-accent/50 transition;
        }
      }
    }

    & > section:nth-child(1) {
      @apply aspect-square;
    } 

    & > section:nth-child(2) {
      @apply col-span-3;

      & > div {
        @apply grid-cols-3;
      }
    } 

    & > section:nth-child(3),
    & > section:nth-child(4) {
      @apply col-span-2 aspect-[2/1];

      & > div {
        @apply grid-cols-2;
      }
    } 

    & > section:nth-child(5) {
      @apply col-span-4 aspect-[4/1];

      & > div {
        @apply grid-cols-2;
      }
    } 
  }
}

@layer utilities {
  .bg-rainbow {
    @apply bg-gradient-to-l from-error to-primary;
    /* @apply bg-gradient-to-r from-primary to-error; */
    /* @apply hover:from-error hover:to-primary; */
  }
}