@import "./styles/core/palette.css";
@import "./styles/core/theme.css";

@tailwind base;
@tailwind utilities;

@layer base {
  @keyframes c-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes c-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes c-slide-in {
    0% {
      opacity: 0;
      transform: translateY(-32px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes c-slide-out {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-32px);
    }
  }
  @keyframes c-slide-in-from-bottom {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes c-slide-out-to-bottom {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @property --c-state-interactive-color {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
  }
}