.eControls .eButton {
    width: var(--eButtonW, auto);
    white-space: nowrap;
    /*max-width: 300px;*/

    & .k-button,
    & .e-btn,
    &.e-btn,
    & .k-button-solid-base {
        width: 100%;
        /*max-width: 128px;*/
        border-radius: var(--radius-md);
        border: 2px solid var(--gray-300);
        background: var(--white);
        font-weight: 600;
        font-size: 14px; /*calc(var(--index) * .5)*/
        height: var(--eButtonH, var(--components-height-md));
        color: var(--gray-700);
        padding: var(--eButtonP, var(--spacing-md) var(--spacing-lg));
        display: flex !important;
        gap: var(--spacing-xs) !important;
        align-items: center !important;
        justify-content: center;
    }

    #btnNavNext {
        &.k-button,
        &.e-btn,
        &.k-button-solid-base {
            flex-direction: row-reverse;
        }
    }

    & .k-button-solid-primary,
    & .e-btn-primary,
    & .e-btn-danger,
    &.e-btn-danger,
    & .e-btn-warning,
    &.e-btn-warning,
    & .k-button-solid-error {
        color: var(--text-on-brand);
    }

    & .k-button-solid-primary,
    & .e-btn-primary,
    & .k-button-solid-success {
        position: relative;
        border: 2px solid transparent;
        background: var(--brand-600);
        overflow: hidden;
        border-radius: var(--radius-md);
        z-index: 0;
    }

        & .k-button-solid-primary::before,
        & .e-btn-primary::before,
        & .k-button-solid-success::before,
        & .k-button-solid-base::before,
        & .k-button::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            pointer-events: none;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            z-index: 1;
            opacity: revert !important;
            display: revert !important;
        }

        & .k-button-solid-primary > *,
        & .e-btn-primary > *,
        & .k-button-solid-success > *,
        & .k-button-solid-base > *,
        & .k-button > * {
            position: relative;
            z-index: 2;
            white-space: nowrap;
        }

    & .k-button.k-selected,
    & .e-btn:hover,
    &.e-btn:hover {
        opacity: .7;
    }

    & .k-button-solid-base.k-focus,
    & .k-button-solid-base:focus,
    & .e-btn:focus {
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .k-button-solid-primary.k-focus,
    & .k-button-solid-primary:focus,
    & .e-btn-primary:focus,
    & .e-btn-primary-secondary:focus {
        box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
    }

    & .e-btn.e-event__btn {
        border: 1px solid var(--brand-600);
        color: var(--brand-600);
        background: transparent;
        border-radius: var(--radius-md);
    }

        & .e-btn.e-event__btn:hover {
            background: var(--brand-50);
        }

    & .e-btn.outline {
        background: var(--white);
        color: var(--brand-600);
        border: 1px solid var(--brand-600);
    }

    & .e-btn.small {
        font-size: 12px;
        padding: 6px 16px;
        width: auto;
    }

    & .e-btn.account-link {
        border: none !important;
    }

    & .e-btn-danger,
    & .e-btn-danger:active,
    &.e-btn-danger,
    &.e-btn-danger:active,
    & .k-button-solid-error {
        background: var(--error-500);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

        & .e-btn-danger:focus,
        &.e-btn-danger:focus,
        & .k-button-solid-error.k-focus {
            box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
        }

    & .e-btn-warning,
    & .e-btn-warning:active,
    &.e-btn-warning,
    &.e-btn-warning:active {
        background: #fbd976;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

        & .e-btn-warning:focus,
        &.e-btn-warning:focus {
            box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
        }

    & .e-btn-primary-secondary,
    & .k-button-solid-secondary {
        border: 2px solid var(--brand-400);
        background: var(--white);
        overflow: hidden;
        border-radius: var(--radius-md);
        color: var(--brand-600);
    }

    &.btn-2xs,
    &.btn-2xs button {
        height: var(--components-height-xxs);
    }

    &.btn-xs,
    &.btn-xs button {
        height: var(--components-height-xs);
    }

    &.btn-sm,
    &.btn-sm button {
        height: var(--components-height-sm);
    }

    &.btn-md,
    &.btn-md button {
        height: var(--components-height-md);
    }

    & .e__filter--btn {
        width: 128px;
    }

    & .k-button-text {
        font-size: var(--font-size-text-sm) !important;
        line-height: var(--line-height-text-sm) !important;
    }

    & .e-link-btn {
        color: var(--brand-600);
        padding: 0;
        border: none;
        height: auto;
    }

    & .e-btn-delete {
        background: transparent;
        border: none;
        color: var(--error-700);
    }

    &:has(> .min) {
        display: flex;
        justify-content: center;
    }

    & .min {
        width: fit-content;
    }

    &.btn-toggle button.e-btn {
        border: none;
    }

    &.btn-toggle.view-toggle button {
        display: flex;
        align-items: center;
        padding: 3px 4px;
        cursor: pointer;
        border: none;
        background: transparent;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
    }

    &.btn-toggle.view-toggle.active button {
        color: var(--brand-700) !important;
    }
}

.eControls .eButton__icon button {
    border: none !important;
    background: transparent !important;
}

.eControls .--eFilter .--ePanel .eButton {
    width: 100%;

    @supports (width: -webkit-fill-available) {
        & {
            width: -webkit-fill-available;
        }
    }

    @supports (width: -moz-available) {
        & {
            width: -moz-available;
        }
    }
}

/* =========================================================
    DISABLED STATE FOR NON-KENDO BUTTONS
    Kendo widget buttons get .k-disabled added at widget init,
    but raw <button> elements emitted by eTemplateButton / ePermission
    (used inside Kendo client templates) bypass widget init.
    These rules give them parity with Kendo's disabled styling.
========================================================= */
.e-btn:disabled,
.e-btn.disabled,
button.btn:disabled,
button.btn.disabled {
    opacity: .5;
    /* A disabled form control never fires mouse events, so a data-e-tooltip on it
       would never trigger the global tooltip. Let the pointer fall through to the
       non-disabled wrapper, which drives the tooltip (see _GlobalTooltips.cshtml).
       INVARIANT: to re-enable such a button JS MUST clear BOTH the `disabled`
       attribute AND this `.disabled` class — otherwise pointer-events:none strands
       it unclickable. Today this is safe: Kendo .enable()/prop('disabled') round-trip
       the ATTRIBUTE (tracked by :disabled), while the `.disabled` CLASS is only ever
       server-rendered for permission-gated buttons that are never re-enabled client-side. */
    pointer-events: none;
}

/* =========================================================
    BUSY STATE — loading spinner (setButtonBusy / .e-busy)
    Only the LABEL is hidden (color:transparent) — the button box (background,
    border) stays — and a centered spinner is shown in its place, WITHOUT
    changing the button's width/height. The spinner is a real child element
    (.e-btn-spinner) — not a pseudo-element — to avoid clashing with Kendo's
    ::before/::after on .k-button. Its colour is set inline by setButtonBusy
    (captured from the button's text colour) so it reads on any variant; the
    normal disabled look stays.
========================================================= */
.e-btn.e-busy {
    position: relative;
    /* Hide the label only (keep bg/border). !important + the descendant rule
       below are needed to beat the Kendo theme, which colours .k-button-text /
       solid variants explicitly. The spinner is excluded so it keeps its colour. */
    color: transparent !important;
}
.e-btn.e-busy *:not(.e-btn-spinner) {
    color: transparent !important;
}
.e-btn.e-busy > .e-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    box-sizing: border-box;
    border: 2px solid currentColor;   /* currentColor = inline colour set by setButtonBusy */
    border-right-color: transparent;
    border-radius: 50%;
    animation: e-btn-spin 0.6s linear infinite;
    pointer-events: none;
}
@keyframes e-btn-spin {
    to {
        transform: rotate(360deg);
    }
}