/**
 * @file
 * Modern button component styles - pill shaped with stateful animations.
 */

@layer components {
  /* Base button class - pill shaped */
  .btn {
    @apply inline-flex items-center justify-center gap-2
           font-semibold text-fluid-base
           rounded-full
           px-6 py-3
           min-w-[120px]
           transition-all duration-200
           focus-ring
           disabled:opacity-50 disabled:cursor-not-allowed;
    position: relative;
    overflow: hidden;
  }

  /* Primary button - Spotify green */
  .btn-primary {
    background-color: #1ed760;
    @apply text-white;
  }

  .btn-primary:hover {
    background-color: #1fdf64;
    @apply ring-2 ring-offset-2;
    --tw-ring-color: #1ed760;
    transform: translateY(-1px);
  }

  .btn-primary:active {
    background-color: #1ab954;
    @apply ring-0;
    transform: translateY(0);
  }

  /* Secondary button - outlined pill */
  .btn-secondary {
    @apply bg-white text-brand-600 ring-1 ring-brand-200
           hover:bg-brand-50 hover:ring-brand-400 hover:ring-2 hover:ring-offset-2
           active:bg-brand-100 active:scale-[0.98];
  }

  /* Ghost button - minimal pill */
  .btn-ghost {
    @apply bg-transparent text-brand-600
           hover:bg-brand-50
           active:bg-brand-100;
  }

  /* Size variants - all pill shaped */
  .btn-sm {
    @apply px-4 py-2 text-sm min-w-[100px];
  }

  .btn-lg {
    @apply px-8 py-4 text-lg min-w-[140px];
  }

  /* ============================================
     Stateful Button States
     ============================================ */

  /* Loading state */
  .btn.is-loading {
    @apply pointer-events-none;
  }

  .btn.is-loading .btn-text {
    @apply opacity-0;
  }

  .btn.is-loading .btn-loader {
    @apply opacity-100;
  }

  /* Success state - Spotify green */
  .btn.is-success {
    background-color: #1ed760;
    @apply pointer-events-none;
  }

  .btn.is-success:hover {
    background-color: #1ed760;
    --tw-ring-color: #1ed760;
  }

  .btn.is-success .btn-text {
    @apply opacity-0;
  }

  .btn.is-success .btn-check {
    @apply opacity-100;
  }

  /* Button inner elements */
  .btn-text {
    @apply transition-opacity duration-200;
  }

  .btn-loader,
  .btn-check {
    @apply absolute inset-0 flex items-center justify-center;
    @apply opacity-0 transition-opacity duration-200;
  }

  .btn-loader svg {
    @apply w-5 h-5 animate-spin;
  }

  .btn-check svg {
    @apply w-5 h-5;
  }
}

/* Legacy button margin styles for backwards compatibility */
.button,
.image-button {
  margin-right: 1em;
  margin-left: 1em;
}
.button:first-child,
.image-button:first-child {
  margin-right: 0;
  margin-left: 0;
}