// ─── Design Tokens ───────────────────────────────────────────────────────────
:host {
  --btn-font:        inherit;
  --btn-radius:      var(--border-radius, 8px);
  --btn-transition:  160ms cubic-bezier(0.4, 0, 0.2, 1);

  // Size tokens
  --btn-sm-padding:  6px 16px;
  --btn-md-padding:  10px 24px;
  --btn-lg-padding:  14px 32px;
  --btn-sm-font:     0.8rem;
  --btn-md-font:     0.9rem;
  --btn-lg-font:     1rem;

  // Color tokens — use global theme CSS custom properties
  --btn-primary-bg:            var(--accent);
  --btn-primary-color:         var(--text-on-accent);
  --btn-primary-border:        var(--accent);
  --btn-primary-hover-bg:      var(--accent-hover);

  --btn-ghost-bg:              transparent;
  --btn-ghost-color:           var(--text-main);
  --btn-ghost-border:          transparent;
  --btn-ghost-hover-bg:        oklch(from var(--accent) l c h / 0.1);

  --btn-outline-bg:            transparent;
  --btn-outline-color:         var(--accent);
  --btn-outline-border:        var(--accent);
  --btn-outline-hover-bg:      var(--accent);
  --btn-outline-hover-color:   var(--text-on-accent);

  display: inline-block;
}

// ─── Base ─────────────────────────────────────────────────────────────────────
.nav-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--btn-font);
  font-weight:     500;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1.5px solid;
  border-radius:   var(--btn-radius);
  cursor:          pointer;
  white-space:     nowrap;
  outline-offset:  3px;
  transition:
    background-color var(--btn-transition),
    color            var(--btn-transition),
    border-color     var(--btn-transition),
    box-shadow       var(--btn-transition),
    transform        var(--btn-transition);

  &:focus-visible {
    outline: 2px solid currentColor;
  }

  &:active:not(.nav-btn--disabled) {
    transform: translateY(1px);
  }

  // ── Sizes ──────────────────────────────────────────────────────────────────
  &--sm {
    padding:   var(--btn-sm-padding);
    font-size: var(--btn-sm-font);
  }

  &--md {
    padding:   var(--btn-md-padding);
    font-size: var(--btn-md-font);
  }

  &--lg {
    padding:   var(--btn-lg-padding);
    font-size: var(--btn-lg-font);
  }

  // ── Variants ───────────────────────────────────────────────────────────────
  &--primary {
    background-color: var(--btn-primary-bg);
    color:            var(--btn-primary-color);
    border-color:     var(--btn-primary-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-primary-hover-bg);
    }
  }

  &--ghost {
    background-color: var(--btn-ghost-bg);
    color:            var(--btn-ghost-color);
    border-color:     var(--btn-ghost-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-ghost-hover-bg);
    }
  }

  &--outline {
    background-color: var(--btn-outline-bg);
    color:            var(--btn-outline-color);
    border-color:     var(--btn-outline-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-outline-hover-bg);
      color:            var(--btn-outline-hover-color);
    }
  }

  // ── States ─────────────────────────────────────────────────────────────────
  &--active {
    box-shadow: inset 0 0 0 1.5px currentColor;
  }

  &--disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    pointer-events: none;
  }

  // ── Parts ──────────────────────────────────────────────────────────────────
  &__icon {
    font-size: 1.1em;
    line-height: 1;
  }

  &__label {
    line-height: 1;
  }

  &__external-icon {
    font-size: 0.85em;
    opacity: 0.65;
    margin-left: -2px;
  }

  &__badge {
    font-size: 0.65em;
    padding: 2px 6px;
    border-radius: 999px;
    background-color: oklch(from currentColor l c h / 0.15);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
  }
}