@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 {
  html, body {
    overscroll-behavior-y: contain;
  }

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

  /* Pull-to-search indicator */
  .ptr--ptr {
    box-shadow: none !important;
    background: transparent !important;
  }

  .ptr--box {
    display: flex;
    justify-content: center;
    padding: 8px 0;
  }

  .ptr--icon,
  .ptr--text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ptr--text {
    display: none;
  }

  .ptr-icon {
    width: 24px;
    height: 24px;
    color: var(--color-zinc-400);
    transition: color 0.2s ease;
  }

  .ptr--release .ptr-icon {
    color: var(--color-zinc-700);
  }
}

@theme {
  --font-sans:
    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  --animate-shine: shine 3s ease 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;
    }
  }
}