@source './';
@import './styles/font-faces.css';
@import './styles/theme.css';

/* Theme variants */
@custom-variant dark (&:is(.dark *, .light .theme-inverse *):not(.dark .theme-inverse *));
@custom-variant light (&:is(.light *, .dark .theme-inverse *):not(.light .theme-inverse *));
@custom-variant focus-visible (&[data-focus-visible-added]);

/* Data state variants */
@custom-variant data-is-active (&[data-active=true]);
@custom-variant group-data-is-active (:merge(.group)[data-active="true"] &);

/* ARIA variants */
@custom-variant aria-invalid (&[aria-invalid="true"]);

/* Animations */
@keyframes loading {
  from {
    transform: translateX(-100%) scaleX(0);
  }
  to {
    transform: translateX(200%) scaleX(3);
  }
}

@keyframes swing {
  0%,
  100% {
    width: 50%;
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(125%);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/*
  Fades a skeleton row in once. Callers set an `animation-delay` per row so the
  placeholders arrive in sequence, the way the real rows will. `both` holds the
  from-state during the delay, so a row waiting its turn is hidden rather than
  visible-then-flashing.
*/
@keyframes skeleton-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Default theme values - can be overridden via CSS or JS config */
:root {
  /* Drawer Sizes */
  --drawer-xs: 20rem;
  --drawer-sm: 24rem;
  --drawer-md: 28rem;
  --drawer-lg: 32rem;
  --drawer-xl: 36rem;
  --drawer-full: 100%;

  /* Modal Sizes */
  --modal-xs: 20rem;
  --modal-sm: 24rem;
  --modal-md: 28rem;
  --modal-lg: 32rem;
  --modal-xl: 36rem;
  --modal-full: 100%;
}

@theme {
  /* Opacity */
  --opacity-hover: 0.8;
  --opacity-disabled: 0.5;

  /* Animations */
  --animate-swing: swing 2s ease-in-out infinite;
  --animate-shimmer: shimmer 2s linear infinite;
  --animate-skeleton-enter: skeleton-enter 320ms cubic-bezier(0.16, 1, 0.3, 1)
    both;
}