@import 'tailwindcss';

@theme {
  --color-corvu-text: #180f24;
  --color-corvu-bg: #f3f1fe;
  --color-corvu-100: #e6e2fd;
  --color-corvu-200: #d4cbfb;
  --color-corvu-300: #bcacf6;
  --color-corvu-400: #a888f1;

  --animate-expand: expand 250ms cubic-bezier(0.32,0.72,0,0.75);
  --animate-collapse: collapse 250ms cubic-bezier(0.32,0.72,0,0.75);
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
  --animate-in: enter 150ms ease;
  --animate-out: exit 150ms ease;

  @keyframes expand {
    0% {
      height: 0px;
    }
    100% {
      height: var(--corvu-disclosure-content-height);
    }
  }

  @keyframes collapse {
    0% {
      height: var(--corvu-disclosure-content-height);
    }
    100% {
      height: 0px;
    }
  }

  @keyframes caret-blink {
    0%, 70%, 100% {
      opacity: 0;
    }
    20%, 50% {
      opacity: 1;
    }
  }

  @keyframes enter {
    from {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate3d(
          var(--tw-enter-translate-x, 0),
          var(--tw-enter-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1)
        )
    }
  }

  @keyframes exit {
    to {
      opacity: var(--tw-exit-opacity, 1);
      transform: translate3d(
          var(--tw-exit-translate-x, 0),
          var(--tw-exit-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1)
        )
    }
  }
}

@utility fade-in-* {
  --tw-enter-opacity: --value(percentage, ratio);
}
@utility fade-out-* {
  --tw-exit-opacity: --value(percentage, ratio);
}

@utility zoom-in-* {
  --tw-enter-scale: --value(percentage, ratio);
}
@utility zoom-out-* {
  --tw-exit-scale: --value(percentage, ratio);
}

@utility slide-in-from-top-* {
  --tw-enter-translate-y: calc(--value(percentage) * -1);
  --tw-enter-translate-y: calc(--value(ratio) * -100%);
  --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
}
@utility slide-in-from-bottom-* {
  --tw-enter-translate-y: --value(percentage);
  --tw-enter-translate-y: calc(--value(ratio) * 100%);
  --tw-enter-translate-y: calc(--value(integer) * var(--spacing));
}

@utility slide-out-to-top-* {
  --tw-exit-translate-y: calc(--value(percentage) * -1);
  --tw-exit-translate-y: calc(--value(ratio) * -100%);
  --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
}
@utility slide-out-to-bottom-* {
  --tw-exit-translate-y: --value(percentage);
  --tw-exit-translate-y: calc(--value(ratio) * 100%);
  --tw-exit-translate-y: calc(--value(integer) * var(--spacing));
}

@plugin '@tailwindcss/forms';
