/* Buttons
/* ------------------------------------------------------------------------- */
.btn {
    --button-bg: transparent;
    --button-border-color: transparent;
    --button-color: var(--text-color);
    --button-box-shadow: none;

    align-items: center;
    appearance: none;
    background: var(--button-bg);
    border: var(--button-border-width, .0625rem) solid;
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius, .375rem);
    box-shadow: var(--button-box-shadow);
    color: var(--button-color);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--button-font-size, .875rem);
    font-weight: var(--button-font-weight, 500);
    gap: var(--button-icon-gap, .5rem);
    block-size: var(--button-height, 2rem);
    justify-content: space-between;
    line-height: var(--button-line-height);
    min-inline-size: max-content;
    padding: var(--button-padding-y, var(--button-padding-y-md)) var(--button-padding-x, var(--button-padding-x-md));
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: var(--button-transition-duration) var(--button-transition-timing);
    transition-property: background-color, border-color, color, opacity, fill;
    user-select: none;
    white-space: nowrap;
}

/* Button hover state */
.btn:not(:disabled):not(.disabled):hover,
.btn:not(:disabled):not(.disabled):focus,
.btn:not(:disabled):not(.disabled):focus-visible {
    background: var(--button-hover-bg, var(--button-bg));
    border-color: var(--button-hover-border-color, var(--button-border-color));
    color: var(--button-hover-color, var(--button-color));
    text-decoration: none;
}

/* Button active/focus states */
.btn:not(:disabled):not(.disabled):active {
    background: var(--button-active-bg, var(--button-bg));
    border-color: var(--button-active-border-color, var(--button-border-color));
    box-shadow: var(--button-active-box-shadow, var(--button-box-shadow));
    color: var(--button-active-color, var(--button-color));
    outline: none;
}
.btn:not(:disabled):not(.disabled):focus:not(:active),
.btn:not(:disabled):not(.disabled):focus-visible:not(:active) {
    box-shadow: none;
    outline: 2px solid var(--button-focus-outline-color);
    outline-offset: -2px;
}

.btn-primary,
.btn-primary.btn.disabled,
.btn-primary.btn:disabled {
    --button-box-shadow: var(--button-primary-box-shadow);
    --button-bg: var(--button-primary-bg);
    --button-color: var(--button-primary-color);
    --button-icon-color: var(--button-primary-icon-color);
    --button-border-color: var(--button-primary-border-color);
    --button-hover-bg: var(--button-primary-hover-bg);
    --button-hover-color: var(--button-primary-hover-color);
    --button-hover-border-color: var(--button-primary-hover-border-color);
    --button-active-box-shadow: var(--button-primary-active-box-shadow);
    --button-active-color: var(--button-primary-active-color);
    --button-active-bg: var(--button-primary-active-bg);
    --button-active-border-color: var(--button-primary-active-border-color);
}

.btn-secondary,
.btn-secondary.btn.disabled,
.btn-secondary.btn:disabled {
    --button-box-shadow: var(--button-secondary-box-shadow);
    --button-bg: var(--button-secondary-bg);
    --button-color: var(--button-secondary-color);
    --button-icon-color: var(--button-secondary-icon-color);
    --button-border-color: var(--button-secondary-border-color);
    --button-hover-bg: var(--button-secondary-hover-bg);
    --button-hover-color: var(--button-secondary-hover-color);
    --button-hover-border-color: var(--button-secondary-hover-border-color);
    --button-active-box-shadow: var(--button-secondary-active-box-shadow);
    --button-active-color: var(--button-secondary-active-color);
    --button-active-bg: var(--button-secondary-active-bg);
    --button-active-border-color: var(--button-secondary-active-border-color);
}

.btn-success,
.btn-success.btn.disabled,
.btn-success.btn:disabled {
    --button-box-shadow: var(--button-success-box-shadow);
    --button-bg: var(--button-success-bg);
    --button-color: var(--button-success-color);
    --button-icon-color: var(--button-success-icon-color);
    --button-border-color: var(--button-success-border-color);
    --button-hover-bg: var(--button-success-hover-bg);
    --button-hover-color: var(--button-success-hover-color);
    --button-hover-border-color: var(--button-success-hover-border-color);
    --button-active-box-shadow: var(--button-success-active-box-shadow);
    --button-active-color: var(--button-success-active-color);
    --button-active-bg: var(--button-success-active-bg);
    --button-active-border-color: var(--button-success-active-border-color);
}

.btn-warning,
.btn-warning.btn.disabled,
.btn-warning.btn:disabled {
    --button-box-shadow: var(--button-warning-box-shadow);
    --button-bg: var(--button-warning-bg);
    --button-color: var(--button-warning-color);
    --button-icon-color: var(--button-warning-icon-color);
    --button-border-color: var(--button-warning-border-color);
    --button-hover-bg: var(--button-warning-hover-bg);
    --button-hover-color: var(--button-warning-hover-color);
    --button-hover-border-color: var(--button-warning-hover-border-color);
    --button-active-box-shadow: var(--button-warning-active-box-shadow);
    --button-active-color: var(--button-warning-active-color);
    --button-active-bg: var(--button-warning-active-bg);
    --button-active-border-color: var(--button-warning-active-border-color);
}

.btn-danger,
.btn-danger.btn.disabled,
.btn-danger.btn:disabled {
    --button-box-shadow: var(--button-danger-box-shadow);
    --button-bg: var(--button-danger-bg);
    --button-color: var(--button-danger-color);
    --button-icon-color: var(--button-danger-icon-color);
    --button-border-color: var(--button-danger-border-color);
    --button-hover-bg: var(--button-danger-hover-bg);
    --button-hover-color: var(--button-danger-hover-color);
    --button-hover-border-color: var(--button-danger-hover-border-color);
    --button-active-box-shadow: var(--button-danger-active-box-shadow);
    --button-active-color: var(--button-danger-active-color);
    --button-active-bg: var(--button-danger-active-bg);
    --button-active-border-color: var(--button-danger-active-border-color);
}

.btn-invisible,
.btn-invisible.btn.disabled,
.btn-invisible.btn:disabled {
    --button-box-shadow: var(--button-invisible-box-shadow);
    --button-bg: var(--button-invisible-bg);
    --button-color: var(--button-invisible-color);
    --button-icon-color: var(--button-invisible-icon-color);
    --button-border-color: var(--button-invisible-border-color);
    --button-hover-bg: var(--button-invisible-hover-bg);
    --button-hover-color: var(--button-invisible-hover-color);
    --button-hover-border-color: var(--button-invisible-hover-border-color);
    --button-active-box-shadow: var(--button-invisible-active-box-shadow);
    --button-active-color: var(--button-invisible-active-color);
    --button-active-bg: var(--button-invisible-active-bg);
    --button-active-border-color: var(--button-invisible-active-border-color);
}
.btn-invisible:hover,
.btn-invisible:focus,
.btn-invisible:focus-visible,
.btn-invisible:active {
    box-shadow: none;
}

.btn-invisible.btn-danger,
.btn-invisible.btn-danger.btn.disabled,
.btn-invisible.btn-danger.btn:disabled {
    --button-color: var(--button-invisible-danger-color);
    --button-icon-color: var(--button-invisible-danger-hover-icon-color);
    --button-hover-color: var(--button-invisible-danger-hover-color);
    --button-hover-bg: var(--button-invisible-danger-hover-hover-bg);
    --button-active-color: var(--button-invisible-danger-active-color);
    --button-active-bg: var(--button-invisible-danger-hover-active-bg);
}
.btn-invisible.btn-danger:hover,
.btn-invisible.btn-danger:focus,
.btn-invisible.btn-danger:focus-visible,
.btn-invisible.btn-danger:active {
    box-shadow: none;
}

/* Button sizes */
.btn-sm {
    --button-font-size: var(--button-font-size-sm);
    --button-padding-y: var(--button-padding-y-sm);
    --button-padding-x: var(--button-padding-x-sm);
    --button-icon-gap: .25rem;
    --button-height: 1.75rem;
}

.btn-lg {
    --button-font-size: var(--button-font-size-lg);
    --button-padding-y: var(--button-padding-y-lg);
    --button-padding-x: var(--button-padding-x-lg);

    block-size: 2.5rem;
}

.btn-block {
    display: block;
    inline-size: 100%;
    place-content: center;
}

/* Disabled state */
.btn.disabled,
.btn:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: var(--button-disabled-opacity);
    pointer-events: none;
}

/* For anchor tags styled as buttons */
a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: unset;
}

/* Button content elements */
.btn > .btn-label {
    align-items: center;
    display: inline-flex;
    margin: 0;
}

.btn > .btn-icon {
    color: var(--button-icon-color, currentColor);
    display: grid;
    flex-shrink: 0;
    place-content: center;
    inline-size: 1em;
}

.btn .btn-icon svg {
    color: var(--button-icon-color, currentColor);
    fill: var(--button-icon-color, currentColor);
}

.btn > .btn-icon + .btn-label,
.btn > i + .btn-label {
    margin-inline-start: 0;
}

.btn > .btn-label + .btn-icon,
.btn > .btn-label + i {
    margin-inline-start: 0;
}

.btn-sm:not(:has(.btn-label)) {
    padding: var(--button-padding-y-sm);
}

.btn-lg:not(:has(.btn-label)) {
    padding: var(--button-padding-y-lg);
}

/* Button groups */
.btn-group > .btn-group:not(:first-child),
.btn-group > :not(.btn-check:first-child) + .btn {
    margin-inline-start: 0;
}
.btn-group > .btn.dropdown-toggle.dropdown-toggle-split {
    margin-inline-start: -1px;
    padding-inline-end: .5625rem;
    padding-inline-start: .5625rem;
}
.dropdown-menu .dropdown-submenu .dropdown-toggle.dropdown-toggle-split {
    border: 0;
    inline-size: auto;
}

/* Block buttons (full width) */
.btn-block {
    display: flex;
    inline-size: 100%;
}

/* Button with badge */
.btn .badge {
    margin-inline-start: var(--button-icon-gap);
}

/* Loading state placeholder */
.btn.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.btn.is-loading::after {
    animation: button-spin 500ms linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-inline-end-color: transparent;
    border-block-start-color: transparent;
    content: "";
    block-size: 1em;
    inset-inline-start: 50%;
    position: absolute;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 1em;
}

@keyframes button-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Ensure compatibility with existing button usage */
.btn > i {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}

/* RTL support using logical properties */
[dir="rtl"] .btn > .btn-icon + .btn-label,
[dir="rtl"] .btn > i + .btn-label {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

[dir="rtl"] .btn > .btn-label + .btn-icon,
[dir="rtl"] .btn > .btn-label + i {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

/* Focus visible for accessibility */
.btn:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* Ensure button text doesn't wrap */
.btn {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Allow wrapping when needed */
.btn.text-wrap {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}