@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%);
  }
}

/* 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: .8;
  --opacity-disabled: .5;

  /* Animations */
  --animate-swing: swing 2s ease-in-out infinite;
}