/*
 * Base Button Override
 * --------------------------------------------------
 */
.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-line-height: 1.3333333333;
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    --bs-btn-focus-box-shadow: var(--bs-btn-box-shadow);
    display: inline-flex;
    column-gap: 0.5rem;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
}

/*
 * Button Sizes
 * --------------------------------------------------
 */
.btn-group-sm > .btn,
.btn-sm {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-line-height: 1.3333333333;
}

.btn-group-xs > .btn,
.btn-xs {
    --bs-btn-padding-x: 0.25rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0.25rem;
    --bs-btn-line-height: 1;
}

/*
 * Button Shadow Color Mapping
 * --------------------------------------------------
 */
.btn-primary,
.btn-outline-primary {
    --insezo-shadow-rgb: var(--color-primary-rgb);
}

.btn-secondary,
.btn-outline-secondary {
    --insezo-shadow-rgb: var(--color-secondary-rgb);
}

.btn-tertiary,
.btn-outline-tertiary {
    --insezo-shadow-rgb: var(--color-tertiary-rgb);
}

.btn-success,
.btn-outline-success {
    --insezo-shadow-rgb: var(--color-success-rgb);
}

.btn-danger,
.btn-outline-danger {
    --insezo-shadow-rgb: var(--color-danger-rgb);
}

.btn-warning,
.btn-outline-warning {
    --insezo-shadow-rgb: var(--color-warning-rgb);
}

.btn-info,
.btn-outline-info {
    --insezo-shadow-rgb: var(--color-info-rgb);
}

.btn-dark,
.btn-outline-dark {
    --insezo-shadow-rgb: var(--color-dark-rgb);
}

.btn-light,
.btn-outline-light {
    --insezo-shadow-rgb: var(--color-light-rgb);
}

.btn-violet,
.btn-outline-violet {
    --insezo-shadow-rgb: var(--color-violet-rgb);
}

/*
 * Button Secondary Hover/Active State Fixup
 * --------------------------------------------------
 */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-secondary) 95%, var(--color-dark));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-secondary) 95%, var(--color-dark));
    --bs-btn-active-bg: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
}

/*
 * Button Hover Elevation
 * --------------------------------------------------
 */
.btn:hover,
.btn:focus-visible {
    --bs-btn-box-shadow: 0 1px 2px 0 rgb(var(--insezo-shadow-rgb) / 45%),
    0 1px 3px 1px rgb(var(--insezo-shadow-rgb) / 30%);
    box-shadow: 0 1px 2px 0 rgb(var(--insezo-shadow-rgb)/45%), 0 1px 3px 1px rgb(var(--insezo-shadow-rgb)/30%);
}

/*
 * Button Toggle States
 * --------------------------------------------------
 */
.btn-check + .btn-secondary {
    height: 32px;
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary:active {
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

/*
 * Plain Button
 * --------------------------------------------------
 */
.btn.btn-plain {
    --bs-btn-color: var(--color-dark);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: inherit;
    --bs-btn-hover-bg: rgb(var(--insezo-btn-plain-rgb, var(--color-dark-rgb)) / 10%);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: inherit;
    --bs-btn-active-bg: rgb(var(--insezo-btn-plain-rgb, var(--color-dark-rgb)) / 20%);
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-disabled-color: inherit;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    background-clip: padding-box;
    box-shadow: none;
}

.btn-plain:focus-visible {
    --bs-btn-hover-bg: rgb(var(--insezo-btn-plain-rgb, var(--color-dark-rgb)) / 15%);
}

/*
 * Close Button
 * --------------------------------------------------
 */
/* Replace the SVG background with a mask that follows the button color. */
.btn-close {
    --bs-btn-close-icon-size: 1rem;
    --bs-btn-close-size: calc(1.5rem + var(--bs-btn-padding-y) * 2);
    position: relative;
    background-image: none;
}

/* Mask the icon independently to preserve the button background and border. */
.btn-close::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--bs-btn-close-icon-size);
    height: var(--bs-btn-close-icon-size);
    background-color: var(--bs-btn-color, var(--bs-btn-close-color));
    mask: var(--bs-btn-close-bg) center/contain no-repeat;
    pointer-events: none;
}

/* Use button size variables around a square, font-relative content area. */
.btn.btn-close {
    box-sizing: border-box;
    width: var(--bs-btn-close-size);
    height: var(--bs-btn-close-size);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    /* Button colors already handle contrast; Bootstrap's inversion would alter them. */
    filter: none;
}

/* Center the icon in the flex layout while retaining the button line height. */
.btn.btn-close::before {
    position: static;
    flex-shrink: 0;
    margin: 0;
    height: var(--bs-btn-close-icon-size);
    mask-size: var(--bs-btn-close-icon-size) auto;
}

/* Match the border colors of the regular button interaction states. */
.btn.btn-close:hover,
.btn.btn-close:focus-visible {
    border-color: var(--bs-btn-hover-border-color);
}

.btn.btn-close:active,
.btn.btn-close.active {
    border-color: var(--bs-btn-active-border-color);
}

.btn.btn-close:disabled,
.btn.btn-close.disabled {
    border-color: var(--bs-btn-disabled-border-color);
}