/* ============================================================
   Button System — Skytrust design system
   Uses design tokens from variables.css
   --base-unit: 0.5rem (8px)

   NOTE: This project uses Bootstrap 5.1 which does NOT support
   --bs-btn-* CSS custom properties. All styles use direct
   property declarations.

   Usage via Tag Helper:
     <sky-button theme-color="primary">Save</sky-button>
     <sky-button theme-color="danger" outline>Delete</sky-button>
     <sky-button theme-color="neutral" outline icon="plus" size="sm">Add</sky-button>

   CSS classes generated:
     Filled:   .sky-btn-{color}
     Outline:  .sky-btn-outline-{color}
     Text:     .sky-btn-text-{color}
   ============================================================ */

/* ── Base button enhancements ────────────────────────────── */
button.btn,
a.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-unit) * 0.5);
    /* 4px */
    -webkit-appearance: none;
    font-family: var(--font-family-base);
    font-weight: 600;
    border-radius: calc(var(--base-unit) * 1);
    /* 8px */
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    /* Consistent height — default */
    height: calc(var(--base-unit) * 5);
    /* 2.5rem / 40px */
    min-height: calc(var(--base-unit) * 5);
    padding: 0 calc(var(--base-unit) * 2);
    /* 0 16px */
    font-size: calc(var(--base-unit) * 1.75);
    /* 14px */
    line-height: calc(var(--base-unit) * 5);
    /* match height */
}

/* ── Size: sm — consistent 32px ──────────────────────────── */
button.btn.btn-sm,
a.btn.btn-sm {
    height: calc(var(--base-unit) * 4);
    /* 2rem / 32px */
    min-height: calc(var(--base-unit) * 4);
    padding: 0 calc(var(--base-unit) * 1.5);
    /* 0 12px */
    font-size: calc(var(--base-unit) * 1.5);
    /* 12px */
    line-height: calc(var(--base-unit) * 4);
}

/* ── Size: lg — consistent 48px ──────────────────────────── */
button.btn.btn-lg,
a.btn.btn-lg {
    height: calc(var(--base-unit) * 6);
    /* 3rem / 48px */
    min-height: calc(var(--base-unit) * 6);
    padding: 0 calc(var(--base-unit) * 2);
    /* 0 16px */
    font-size: calc(var(--base-unit) * 1.75);
    /* 14px */
    line-height: calc(var(--base-unit) * 6);
}

/* ── Icon inside button ──────────────────────────────────── */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Default (40px button) — 14px icon — !important to override Lucide's inline SVG attributes */
.btn svg.btn-icon,
a.btn svg.btn-icon {
    width: calc(var(--base-unit) * 1.75) !important;
    /* 14px */
    height: calc(var(--base-unit) * 1.75) !important;
}

/* sm (32px button) — 12px icon */
.btn-sm svg.btn-icon {
    width: calc(var(--base-unit) * 1.5) !important;
    /* 12px */
    height: calc(var(--base-unit) * 1.5) !important;
}

/* lg (48px button) — 16px icon */
.btn-lg svg.btn-icon {
    width: calc(var(--base-unit) * 2) !important;
    /* 16px */
    height: calc(var(--base-unit) * 2) !important;
}

/* Icon-only buttons — slightly larger icon since no text */
.btn.e-icon-btn svg.btn-icon,
.btn.square-btn svg.btn-icon {
    width: calc(var(--base-unit) * 2) !important;
    /* 16px */
    height: calc(var(--base-unit) * 2) !important;
}

.btn.e-icon-btn.btn-sm svg.btn-icon,
.btn.square-btn.btn-sm svg.btn-icon {
    width: calc(var(--base-unit) * 1.75) !important;
    /* 14px */
    height: calc(var(--base-unit) * 1.75) !important;
}

/* ── Icon-only button (square) — same height as text buttons ── */
.btn.e-icon-btn,
.btn.square-btn {
    width: calc(var(--base-unit) * 5);
    /* 40px — matches default height */
    min-width: calc(var(--base-unit) * 5);
    height: calc(var(--base-unit) * 5);
    min-height: calc(var(--base-unit) * 5);
    padding: 0;
    border-radius: calc(var(--base-unit) * 1);
}

.btn.e-icon-btn.btn-sm,
.btn.square-btn.btn-sm {
    width: calc(var(--base-unit) * 4);
    /* 32px — matches sm height */
    min-width: calc(var(--base-unit) * 4);
    height: calc(var(--base-unit) * 4);
    min-height: calc(var(--base-unit) * 4);
}

/* ============================================================
   FILLED VARIANTS
   ============================================================ */
.sky-btn-primary {
    color: var(--content-neutral-white);
    background-color: var(--primary-base);
    border-color: var(--primary-base);
}

.sky-btn-primary:hover {
    color: var(--content-neutral-white);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.sky-btn-primary:active,
.sky-btn-primary.active {
    color: var(--content-neutral-white);
    background-color: var(--primary-pressed);
    border-color: var(--primary-pressed);
}

.sky-btn-primary:focus {
    box-shadow: 0 0 0 calc(var(--base-unit) * 0.5) var(--primary-focused);
}

.sky-btn-primary:disabled,
.sky-btn-primary.disabled {
    color: var(--content-neutral-white);
    background-color: var(--primary-base);
    border-color: var(--primary-base);
    opacity: 0.65;
}

.sky-btn-secondary {
    color: var(--content-neutral-white);
    background-color: var(--secondary-base);
    border-color: var(--secondary-base);
}

.sky-btn-secondary:hover {
    color: var(--content-neutral-white);
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
}

.sky-btn-secondary:active,
.sky-btn-secondary.active {
    background-color: var(--secondary-pressed);
    border-color: var(--secondary-pressed);
}

.sky-btn-tertiary {
    color: var(--content-neutral-white);
    background-color: var(--tertiary-base);
    border-color: var(--tertiary-base);
}

.sky-btn-tertiary:hover {
    color: var(--content-neutral-white);
    background-color: var(--tertiary-hover);
    border-color: var(--tertiary-hover);
}

.sky-btn-success {
    color: var(--content-neutral-white);
    background-color: var(--success-base);
    border-color: var(--success-base);
}

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

.sky-btn-warning {
    color: var(--content-neutral-white);
    background-color: var(--warning-base);
    border-color: var(--warning-base);
}

.sky-btn-warning:hover {
    color: var(--content-neutral-white);
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
}

.sky-btn-danger {
    color: var(--content-neutral-white);
    background-color: var(--danger-base);
    border-color: var(--danger-base);
}

.sky-btn-danger:hover {
    color: var(--content-neutral-white);
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.sky-btn-danger:active,
.sky-btn-danger.active {
    background-color: var(--danger-pressed);
    border-color: var(--danger-pressed);
}

.sky-btn-info {
    color: var(--content-neutral-white);
    background-color: var(--info-base);
    border-color: var(--info-base);
}

.sky-btn-info:hover {
    color: var(--content-neutral-white);
    background-color: var(--info-hover);
    border-color: var(--info-hover);
}

/* ============================================================
   OUTLINE VARIANTS
   ============================================================ */
.sky-btn-outline-primary {
    color: var(--primary-base);
    background-color: transparent;
    border-color: var(--stroke-primary);
}

.sky-btn-outline-primary:hover {
    color: var(--content-neutral-white);
    background-color: var(--primary-base);
    border-color: var(--primary-hover);
}

.sky-btn-outline-primary:active,
.sky-btn-outline-primary.active {
    color: var(--content-neutral-white);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.sky-btn-outline-secondary {
    color: var(--secondary-base);
    background-color: transparent;
    border-color: var(--stroke-secondary);
}

.sky-btn-outline-secondary:hover {
    color: var(--content-neutral-white);
    background-color: var(--secondary-base);
    border-color: var(--secondary-hover);
}

.sky-btn-outline-danger {
    color: var(--danger-base);
    background-color: transparent;
    border-color: var(--stroke-danger);
}

.sky-btn-outline-danger:hover {
    color: var(--content-neutral-white);
    background-color: var(--danger-base);
    border-color: var(--danger-hover);
}

.sky-btn-outline-danger:active,
.sky-btn-outline-danger.active {
    color: var(--content-neutral-white);
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.sky-btn-outline-success {
    color: var(--success-base);
    background-color: transparent;
    border-color: var(--stroke-success);
}

.sky-btn-outline-success:hover {
    color: var(--content-neutral-white);
    background-color: var(--success-base);
    border-color: var(--success-hover);
}

.sky-btn-outline-info {
    color: var(--info-base);
    background-color: transparent;
    border-color: var(--stroke-info);
}

.sky-btn-outline-info:hover {
    color: var(--content-neutral-white);
    background-color: var(--info-base);
    border-color: var(--info-hover);
}

/* ============================================================
   NEUTRAL VARIANTS
   ============================================================ */
.sky-btn-neutral {
    color: var(--content-neutral-dark);
    background-color: var(--surface-neutral-base);
    border-color: var(--stroke-neutral-base);
}

.sky-btn-neutral:hover {
    color: var(--content-neutral-dark);
    background-color: var(--surface-neutral-semi-dark);
    border-color: var(--stroke-neutral-base);
}

.sky-btn-outline-neutral {
    color: var(--content-neutral-dark);
    background-color: var(--surface-neutral-light);
    border-color: var(--stroke-neutral-base);
}

.sky-btn-outline-neutral:hover {
    color: var(--content-neutral-dark);
    background-color: var(--surface-neutral-base);
    border-color: var(--stroke-neutral-base);
}

/* ============================================================
   TEXT-ONLY VARIANTS (no border, transparent bg)
   ============================================================ */
.sky-btn-text-primary {
    color: var(--primary-base);
    background-color: transparent;
    border-color: transparent;
}

.sky-btn-text-primary:hover {
    color: var(--content-neutral-white);
    background-color: var(--primary-base);
    border-color: var(--primary-hover);
}

.sky-btn-text-danger {
    color: var(--danger-base);
    background-color: transparent;
    border-color: transparent;
}

.sky-btn-text-danger:hover {
    color: var(--content-neutral-white);
    background-color: var(--danger-base);
    border-color: var(--danger-hover);
}

.sky-btn-text-neutral {
    color: var(--content-neutral-dark);
    background-color: transparent;
    border-color: transparent;
}

.sky-btn-text-neutral:hover {
    color: var(--content-neutral-dark);
    background-color: var(--surface-neutral-base);
    border-color: transparent;
}