@import "tailwindcss";

@source "../index.html";
@source "./**/*.ts";

@theme {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
}

@layer base {
  :root {
    color-scheme: dark;
    font-family: var(--font-sans);
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    @apply h-full overflow-hidden bg-transparent select-none;
  }

  body {
    @apply m-0 flex items-center justify-center;
  }
}

@layer components {
  .overlay {
    @apply flex h-full w-full items-center justify-center p-2 opacity-100;
    transform: translateY(0) scale(1);
    transition:
      opacity 180ms ease,
      transform 180ms ease;
  }

  .overlay.hidden {
    @apply opacity-0;
    transform: translateY(7px) scale(0.985);
  }

  .overlay.decaying {
    @apply opacity-0;
    transform: translateY(6px) scale(0.992);
  }

  .panel {
    @apply w-full max-w-full overflow-hidden text-white;
    background: rgba(58, 59, 61, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    padding: 17px 18px 18px;
  }

  h1 {
    @apply mb-4 overflow-hidden text-center text-lg leading-tight text-ellipsis whitespace-nowrap text-white;
    font-weight: 650;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  }

  .button-strip {
    @apply grid grid-cols-10 gap-[5px];
  }

  .button-tile {
    @apply relative flex min-h-[54px] min-w-0 items-center overflow-hidden px-1.5 pt-[7px] pb-2;
    background: rgba(255, 255, 255, 0.095);
    border-radius: 6px;
    transition:
      background-color 120ms ease,
      box-shadow 120ms ease,
      transform 120ms ease;
  }

  .button-tile::before {
    @apply absolute top-0 right-0 left-0 content-[''];
    background: var(--button-color);
    height: 4px;
    opacity: 0.68;
    transition:
      height 120ms ease,
      opacity 120ms ease;
  }

  .button-label {
    @apply relative z-10 line-clamp-2 w-full min-w-0 overflow-hidden text-center text-xs leading-tight text-ellipsis text-white;
    display: -webkit-box;
    font-weight: 650;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.24);
  }

  .overlay.entering .panel {
    animation: osd-pop 280ms cubic-bezier(0.2, 0.95, 0.22, 1) both;
  }

  .overlay.entering .button-tile {
    animation: tile-rise 220ms ease-out both;
    animation-delay: calc(45ms + (var(--tile-index) * 16ms));
  }

  .button-tile.pressed {
    background: rgba(255, 255, 255, 0.22);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 2px 7px rgba(255, 255, 255, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.22);
    transform: translateY(1px) scale(0.975);
  }

  .button-tile.pressed::before {
    height: 6px;
    opacity: 1;
  }
}

@keyframes osd-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.975);
  }

  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tile-rise {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay,
  .panel,
  .button-tile {
    animation: none;
    transition: opacity 120ms ease;
  }
}