@layer components {
  .btn {
    @apply px-5 py-2.5 rounded-3xl font-medium transition-all duration-200 focus:ring-4 inline-flex items-center gap-2.5 text-center justify-center;

    &.btn-sm {
      @apply px-4 py-2 text-sm rounded-3xl font-medium transition-all duration-200 focus:ring-4 inline-flex items-center gap-2;
    }
    &.btn-xs {
      @apply px-3 py-1.5 text-xs rounded-3xl font-medium transition-all duration-200 focus:ring-4 inline-flex items-center gap-1.5;
    }
  }

  .btn-link {
    @apply font-medium underline underline-offset-2;
  }

  .btn-primary {
    @apply bg-neutral-800 hover:bg-neutral-700 text-white focus:ring-neutral-300/25 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-white {
    @apply bg-white hover:bg-neutral-100 text-neutral-800 focus:ring-neutral-300/25 outline-1 outline-neutral-300/70 disabled:opacity-50 disabled:cursor-not-allowed shadow-xs;
  }

  .btn-ghost {
    @apply bg-transparent hover:bg-neutral-100 text-neutral-800 focus:ring-neutral-300/25 outline-1 outline-neutral-300/60 shadow-xs disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-success {
    @apply bg-green-600 hover:bg-green-500 text-white focus:ring-green-300/25 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-warning {
    @apply bg-amber-400 hover:bg-amber-500 focus:ring-amber-300/25 disabled:opacity-50 disabled:cursor-not-allowed text-amber-950;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-500 text-white focus:ring-red-300/25 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-transparent {
    @apply bg-transparent hover:bg-neutral-200/70 text-neutral-800 focus:ring-neutral-300/25  disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-nav-link {
    @apply text-neutral-600 hover:text-neutral-800 px-5 py-2 font-medium transition-colors duration-200 hover:bg-neutral-100 focus:ring-neutral-500/25 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-nav-link__active {
    @apply text-neutral-950 bg-neutral-100 border-none disabled:opacity-50 disabled:cursor-not-allowed;
  }


  /* Toggle button styles */
  .toggle-btn {
    @apply bg-neutral-100 hover:bg-neutral-200 border-transparent text-neutral-700;
  }

  .toggle-btn.active {
    @apply bg-white border-neutral-900 text-neutral-900 shadow-sm;
  }
}