@import "tailwindcss" source(none);
@source "../css";
@source "../js";
@source "../../lib/music_library_web";
@source "../../deps/fluxon/**/*.*ex";
@import "../../deps/fluxon/priv/static/theme";
@source "../../deps/live_toast/lib/**/*.*ex";

/* A Tailwind plugin that makes "hero-#{ICON}" classes available.
   The heroicons installation itself is managed by your mix.exs */
@plugin "../vendor/heroicons";
@plugin "@tailwindcss/typography";

@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@theme {
  --font-sans: "InterVariable", sans-serif;
  --font-sans--font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  --animate-shine: shine 3s ease infinite;
  --animate-equalizer-bar: equalizer-bar 1.2s ease-in-out infinite;

  @keyframes shake {
    10%,
    90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
      transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  @keyframes shine {
    0%,
    100% {
      background-size: 100% 100%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }

  @keyframes equalizer-bar {
    0%,
    100% {
      height: 20%;
    }
    50% {
      height: 100%;
    }
  }
}