@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }
  }

  /* Button icon */
  .btn__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
  }

  .btn--primary {
    background-color: var(--color-primary-700);
    color: white;
    border-color: var(--color-primary-700);
    &:hover {
      background-color: var(--color-primary-800);
      border-color: var(--color-primary-800);
    }
    &:active {
      background-color: var(--color-primary-800);
    }
  }

  .btn--secondary {
    background-color: transparent;
    color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    &:hover {
      background-color: var(--color-primary-50);
      border-color: var(--color-primary-700);
    }
  }

  .btn--gray {
    background-color: transparent;
    color: var(--color-gray-600);
    border-color: var(--color-border);
    &:hover {
      background-color: var(--color-gray-50);
      border-color: var(--color-gray-400);
      color: var(--color-gray-700);
    }
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--color-text);
    border-color: transparent;
    &:hover, &:focus {
      background-color: var(--color-gray-100);
    }
  }

  .btn--danger {
    background-color: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
    &:hover {
      background-color: var(--color-error-dark);
      border-color: var(--color-error-dark);
    }
  }

  .btn--success {
    background-color: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
    &:hover {
      background-color: var(--color-success);
      border-color: var(--color-success);
    }
  }

  /* ===========================================
     Button Group (Split Button)
     =========================================== */

  .btn-group {
    display: inline-flex;
    position: relative;
  }

  .btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
  }

  .btn-group > .btn + .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .btn-group__toggle {
    padding-inline: var(--space-2);
  }

  .btn-group__toggle svg {
    width: 1em;
    height: 1em;
  }

  .btn-group__menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-1);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    padding: var(--space-1) 0;
  }

  .btn-group__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    &:hover {
      background: var(--color-gray-100);
    }
  }

  .btn--link {
    text-decoration: underline dotted;
    color: var(--color-primary-600);
    transition: var(--transition-fast);
    &:hover {
      text-decoration: underline;
      color: var(--color-primary-700);
    }

    &.btn--link--destructive {
      color: var(--color-error);
      &:hover {
        color: var(--color-error);
      }
    }
  }

  /* ===========================================
     Button Sizes
     =========================================== */

  .btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
  }

  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
  }

  .btn--fw {
    width: 100%;
  }

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

  .btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
    &::after {
      content: "";
      position: absolute;
      width: 1em;
      height: 1em;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: btn-spinner 0.6s linear infinite;
    }
  }

  @keyframes btn-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .btn[disabled],
  .btn.is-disabled,
  .btn--disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn--icon-only {
    padding: var(--space-2);
    aspect-ratio: 1;
    gap: 0;
  }

  .btn--icon-only .btn__icon {
    width: 1.5em;
    height: 1.5em;
  }

  [data-theme="dark"] {
    .btn {
      &.btn--secondary {
        &:hover {
          background: var(--color-hover);
          color: var(--color-white);
        }
      }
    }
  }
}