/*
 * Admin buttons, on every admin page. The look is the Products Catalog's .pc-btn
 * (public/css/admin/products-catalog.css): 38px high, 9px corners, 0.82rem semibold text,
 * a white button with a grey border that turns blue on hover, and a solid blue primary.
 *
 * Tabler draws .btn from --tblr-btn-* variables. This file loads after Tabler, so its .btn
 * rule replaces the colours of every Tabler variant; a variant that should look different
 * from the plain button is set again below. Page styles should not change a button's size,
 * corners, font or colours: pick a variant and size class instead.
 */

:root {
    --admin-btn-text: #172033;
    --admin-btn-surface: #ffffff;
    --admin-btn-border: #d5dce8;
    --admin-btn-primary: #2563eb;
    --admin-btn-primary-soft: #eff6ff;
    --admin-btn-primary-fill: #2563eb;
    --admin-btn-danger: #b42318;
    --admin-btn-danger-fill: #b42318;
    --admin-btn-success: #15803d;
    --admin-btn-success-fill: #15803d;
    --admin-btn-warning: #b45309;
    --admin-btn-warning-fill: #b45309;
    --admin-btn-dark-fill: #172033;
}

html[data-bs-theme="dark"] {
    --admin-btn-text: var(--portal-dark-text-1);
    --admin-btn-surface: var(--portal-dark-surface-1);
    --admin-btn-border: var(--portal-dark-border-3);
    --admin-btn-primary: #60a5fa;
    --admin-btn-primary-soft: rgba(59, 130, 246, 0.14);
    --admin-btn-primary-fill: #006de0;
    --admin-btn-danger: #f87171;
    --admin-btn-danger-fill: #b42318;
    --admin-btn-success: #4ade80;
    --admin-btn-success-fill: #187b35;
    --admin-btn-warning: #fbbf24;
    --admin-btn-warning-fill: #b45309;
    --admin-btn-dark-fill: var(--portal-dark-surface-4);
}

.btn {
    --admin-btn-accent: var(--admin-btn-primary);
    --tblr-btn-padding-x: 0.85rem;
    --tblr-btn-padding-y: 0.45rem;
    --tblr-btn-font-size: 0.82rem;
    --tblr-btn-font-weight: 650;
    --tblr-btn-border-radius: 9px;
    --tblr-btn-color: var(--admin-btn-text);
    --tblr-btn-bg: var(--admin-btn-surface);
    --tblr-btn-border-color: var(--admin-btn-border);
    --tblr-btn-hover-color: var(--admin-btn-accent);
    --tblr-btn-hover-bg: var(--tblr-btn-bg);
    --tblr-btn-hover-border-color: var(--admin-btn-accent);
    --tblr-btn-active-color: var(--admin-btn-accent);
    --tblr-btn-active-bg: var(--tblr-btn-bg);
    --tblr-btn-active-border-color: var(--admin-btn-accent);
    --tblr-btn-active-shadow: none;
    --tblr-btn-disabled-color: var(--tblr-btn-color);
    --tblr-btn-disabled-bg: var(--tblr-btn-bg);
    --tblr-btn-disabled-border-color: var(--tblr-btn-border-color);
    --tblr-btn-box-shadow: none;
    gap: 0.4rem;
    min-height: 38px;
    text-decoration: none;
}

/* Toggle buttons that are on (.active, aria-pressed, a checked .btn-check) and open dropdown toggles. */
:is(.btn-check:checked + .btn, .btn.active, .btn.show, .btn[aria-pressed="true"]):not(:is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-link)) {
    border-color: var(--admin-btn-accent);
    color: var(--admin-btn-accent);
    background-color: var(--admin-btn-primary-soft);
}

/* Outline buttons look like the plain button and take their colour on hover. */
:is(.btn-outline-danger, .btn-ghost-danger) {
    --admin-btn-accent: var(--admin-btn-danger);
}

:is(.btn-outline-success, .btn-ghost-success) {
    --admin-btn-accent: var(--admin-btn-success);
}

:is(.btn-outline-warning, .btn-ghost-warning) {
    --admin-btn-accent: var(--admin-btn-warning);
}

/* Ghost: no frame until hover. Icon-only buttons keep the frame, like the catalog's row actions. */
:is(.btn-ghost, .btn-ghost-primary, .btn-ghost-secondary, .btn-ghost-info, .btn-ghost-dark, .btn-ghost-light, .btn-ghost-danger, .btn-ghost-success, .btn-ghost-warning):not(.btn-icon) {
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
}

/* Solid buttons. Primary is the page's main action; the others keep their meaning. */
.btn-primary,
.btn-info {
    --admin-btn-fill: var(--admin-btn-primary-fill);
}

.btn-success {
    --admin-btn-fill: var(--admin-btn-success-fill);
}

.btn-danger {
    --admin-btn-fill: var(--admin-btn-danger-fill);
}

.btn-warning {
    --admin-btn-fill: var(--admin-btn-warning-fill);
}

.btn-dark {
    --admin-btn-fill: var(--admin-btn-dark-fill);
}

:is(.btn-primary, .btn-info, .btn-success, .btn-danger, .btn-warning, .btn-dark) {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: var(--admin-btn-fill);
    --tblr-btn-border-color: var(--admin-btn-fill);
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-border-color: var(--admin-btn-fill);
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-border-color: var(--admin-btn-fill);
}

:is(.btn-primary, .btn-info, .btn-success, .btn-danger, .btn-warning, .btn-dark):is(:hover, :focus-visible):not(:disabled, .disabled) {
    filter: brightness(1.08);
}

/* A text link with a button's hit area. */
.btn-link {
    --tblr-btn-color: var(--admin-btn-primary);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--admin-btn-primary);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--admin-btn-primary);
    --tblr-btn-active-border-color: transparent;
    color: var(--tblr-btn-color);
}

.btn-link:hover {
    text-decoration: underline;
}

/* Sizes */
.btn-sm,
.btn-group-sm > .btn {
    --tblr-btn-padding-x: 0.6rem;
    --tblr-btn-padding-y: 0.25rem;
    --tblr-btn-font-size: 0.76rem;
    --tblr-btn-border-radius: 7px;
    min-height: 30px;
}

.btn-xs {
    --tblr-btn-padding-x: 0.45rem;
    --tblr-btn-padding-y: 0.15rem;
    --tblr-btn-font-size: 0.72rem;
    --tblr-btn-line-height: 1.5;
    --tblr-btn-border-radius: 6px;
    min-height: 24px;
}

.btn-lg,
.btn-group-lg > .btn {
    --tblr-btn-padding-x: 1.1rem;
    --tblr-btn-padding-y: 0.55rem;
    --tblr-btn-font-size: 0.9rem;
    --tblr-btn-border-radius: 10px;
    min-height: 44px;
}

.btn-link {
    min-height: 0;
}

/* Square icon-only buttons. */
.btn-icon {
    min-width: 38px;
    padding-right: 0;
    padding-left: 0;
}

.btn-icon:is(.btn-sm, .btn-group-sm > .btn) {
    min-width: 30px;
}

.btn-icon.btn-xs {
    min-width: 24px;
}

.btn-icon:is(.btn-lg, .btn-group-lg > .btn) {
    min-width: 44px;
}

.btn-icon > i {
    font-size: 1rem;
}

.btn-icon:is(.btn-sm, .btn-xs) > i {
    font-size: 0.95rem;
}