/* Sidebar (ea:Sidebar component)
/* ------------------------------------------------------------------------- */

/* Container
   ========================================================================= */
.sidebar-wrapper {
    position: relative;
}
.ea-sidebar {
    background: var(--sidebar-bg);
    block-size: 100%;
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    inset-inline-start: calc(0px - 2 * var(--ea-sp-10) - var(--sidebar-max-width));
    overflow-inline: hidden;
    overflow-block: auto;
    padding: var(--ea-sp-8) var(--ea-sp-10);
    position: fixed;
    inset-block-start: 0;
    transition: left var(--ea-duration-slower);
    z-index: calc(var(--zindex-modal-backdrop) + 1);
    inline-size: calc(2 * var(--ea-sp-10) + var(--sidebar-max-width));
    overscroll-behavior: contain; /* needed to not scroll the entire page when reaching the end of this element scroll */
}
@media (min-width: 992px) {
    .ea-sidebar {
        box-shadow: inset calc(-1 * var(--border-width)) 0 0 var(--sidebar-border-color);
        max-inline-size: var(--sidebar-max-width);
        /* 'visible' is required so the sticky footer anchors to the viewport instead
           of the sidebar (any other value turns the sidebar into its scrollport) */
        overflow: visible;
        padding: 0 var(--sidebar-padding-right) 0 var(--sidebar-padding-left);
        position: static;
        z-index: calc(var(--zindex-modal-backdrop) - 1);
        inline-size: initial;
        overscroll-behavior: auto;
    }
}
body.ea-mobile-sidebar-visible .ea-sidebar {
    box-shadow: 20px 0 25px -5px color-mix(in srgb, var(--black) 10%, transparent), 10px 0 10px -5px
        color-mix(in srgb, var(--black) 4%, transparent);
    inset-inline-start: 0;
}

/* Header
   ========================================================================= */
.ea-sidebar-header {
    display: none;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .ea-sidebar-header {
        display: block;
        padding-inline-start: var(--sidebar-menu-items-padding-left);
    }
}

.ea-sidebar-logo {
    overflow: hidden;
}
.ea-sidebar-logo a {
    color: var(--sidebar-logo-color);
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    padding: var(--ea-sp-8) 0 var(--ea-sp-14) 0;
}
.ea-sidebar-logo img,
.ea-sidebar-logo svg {
    max-inline-size: 100%;
}

.ea-sidebar-logo .logo-custom {
    display: block;
}
.ea-sidebar-logo .logo-compact {
    display: none;
}

/* Content
   ========================================================================= */
.ea-sidebar-content {
    padding: 0 0 var(--ea-sp-10);
}

/* Footer
   ========================================================================= */
/* always anchored to the bottom of the screen; when there's not enough vertical
   space, the menu items scroll underneath it (its size is not managed: it grows
   with its contents, so keep them short or make them scrollable yourself) */
.ea-sidebar-footer {
    background: var(--sidebar-bg);
    box-shadow: 0 calc(-1 * var(--border-width)) 0 var(--sidebar-border-color);
    flex-shrink: 0;
    inset-block-end: 0;
    margin-block-end: calc(-1 * var(--ea-sp-8));
    margin-block-start: auto;
    margin-inline: calc(-1 * var(--ea-sp-10));
    padding: var(--ea-sp-6) var(--ea-sp-10);
    position: sticky;
}
@media (min-width: 992px) {
    .ea-sidebar-footer {
        /* the inset shadow continues the sidebar right border that the footer overlaps */
        box-shadow: 0 calc(-1 * var(--border-width)) 0 var(--sidebar-border-color), inset calc(-1 * var(--border-width))
            0 0 var(--sidebar-border-color);
        margin-block-end: 0;
        margin-inline-start: calc(0px - var(--sidebar-padding-left));
        margin-inline-end: calc(0px - var(--sidebar-padding-right));
        padding: var(--ea-sp-6) var(--sidebar-padding-right) var(--ea-sp-6)
            calc(var(--sidebar-padding-left) + var(--sidebar-menu-items-padding-left));
    }
}

/* Groups
   ========================================================================= */
.ea-sidebar-group-items {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
}

.ea-sidebar-group-label {
    align-items: center;
    color: var(--sidebar-menu-header-color);
    display: flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    margin-block-start: var(--ea-sp-8);
    padding: var(--ea-sp-4) var(--ea-sp-2) var(--ea-sp-4) var(--sidebar-menu-items-padding-left);
    text-transform: uppercase;
}
.ea-sidebar-group:first-child .ea-sidebar-group-label {
    margin-block-start: 0;
}
.ea-sidebar-group-icon {
    color: inherit;
    margin-inline-end: var(--ea-sp-4);
}
.ea-sidebar-group-label .ea-sidebar-badge {
    margin-inline-start: auto;
}

/* Items
   ========================================================================= */
.ea-sidebar-item {
    border-radius: var(--border-radius);
    padding-inline-start: var(--sidebar-menu-items-padding-left);
    padding-inline-end: var(--ea-sp-2);
    position: relative;
}
.ea-sidebar-item.is-active {
    background: var(--sidebar-menu-active-item-bg);
}
/* expanded submenu parents don't show the hover background: the open submenu
   already signals the interaction, and highlighting the whole <li> would also
   tint the submenu items below */
.ea-sidebar-item:has(> .ea-sidebar-item-link:hover):not(.is-active):not(.is-expanded) {
    background: var(--sidebar-item-hover-bg);
}

.ea-sidebar-item-link {
    /* 'first baseline' keeps the icon and the badge aligned with the first line
       of the label, both in single-line and multi-line menu items */
    align-items: first baseline;
    /* reset the <button> element used by items with submenus */
    background: none;
    border: 0;
    color: var(--sidebar-menu-color);
    cursor: pointer;
    display: flex;
    font: inherit;
    inline-size: 100%;
    padding: var(--ea-sp-2) 0;
    text-align: start;
}

.ea-sidebar-item.is-active > .ea-sidebar-item-link .ea-sidebar-item-label {
    font-weight: var(--font-weight-medium);
}
.ea-sidebar-item.is-active:not(.is-expanded) > .ea-sidebar-item-link,
.ea-sidebar-item.is-active:not(.is-expanded) > .ea-sidebar-item-link .ea-sidebar-item-icon {
    color: var(--sidebar-menu-active-item-color);
}

.ea-sidebar-item:not(.is-active):not(.is-kept-open) > .ea-sidebar-item-link:hover,
.ea-sidebar-item:not(.is-active):not(.is-kept-open) > .ea-sidebar-item-link:hover .ea-sidebar-item-icon,
.ea-sidebar-item:not(.is-active):not(.is-kept-open) > .ea-sidebar-item-link:focus-visible,
.ea-sidebar-item:not(.is-active):not(.is-kept-open) > .ea-sidebar-item-link:focus-visible .ea-sidebar-item-icon {
    color: var(--sidebar-menu-hover-color);
}

.ea-sidebar-item-icon {
    color: var(--sidebar-menu-icon-color);
    flex-shrink: 0;
    margin-inline-end: var(--ea-sp-5);
    text-align: center;
    /* no explicit block-size: the natural line box keeps the baseline (and so the
       icon) aligned with the first line of the label */
    inline-size: 1.25em;
}
.ea-sidebar-item-icon svg {
    color: var(--sidebar-menu-icon-color);
    max-block-size: var(--icon-size-sm);
    max-inline-size: var(--icon-size-md);
    vertical-align: sub;
}

.ea-sidebar-item-label {
    flex: 1;
    min-inline-size: 0;
}

.ea-sidebar-item-chevron {
    color: var(--sidebar-menu-icon-color);
    flex-shrink: 0;
    margin-inline-start: var(--ea-sp-4);
    transition: rotate var(--ea-duration-slow) var(--ea-ease-in-out);
    inline-size: auto; /* this is needed to make it look better */
}
span.icon.ea-sidebar-item-chevron svg {
    max-block-size: 12px;
    max-inline-size: 12px;
}
.ea-sidebar-item.is-expanded > .ea-sidebar-item-link .ea-sidebar-item-chevron {
    rotate: 90deg;
}

/* keep-open submenus are always expanded and can't be collapsed, so their parent
   doesn't act as a toggle and doesn't display the chevron */
.ea-sidebar-item.is-kept-open > .ea-sidebar-item-link {
    cursor: default;
}
.ea-sidebar-item.is-kept-open .ea-sidebar-item-chevron {
    display: none;
}

/* Badges
   ========================================================================= */
.ea-sidebar-badge {
    margin-inline-start: var(--ea-sp-4);
    min-inline-size: var(--ea-sp-12);
}
.ea-sidebar-badge.badge-secondary {
    background: var(--sidebar-menu-badge-bg);
    color: var(--sidebar-menu-badge-color);
}
.ea-light-scheme .ea-sidebar-item .ea-sidebar-badge {
    box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--black) 10%, transparent);
}
.ea-light-scheme .ea-sidebar-item.is-active .ea-sidebar-badge {
    box-shadow: inset 0 0 0 var(--border-width) color-mix(in srgb, var(--black) 20%, transparent);
}
.ea-dark-scheme .ea-sidebar-item.is-active .ea-sidebar-badge {
    background: var(--sidebar-bg);
    box-shadow: inset 0 0 0 var(--border-width) transparent;
}

/* Submenus (inline accordion; becomes a flyout in compact mode)
   ========================================================================= */
.ea-sidebar-submenu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ea-duration-slow) var(--ea-ease-in-out);
}
.ea-sidebar-item.is-expanded > .ea-sidebar-submenu {
    grid-template-rows: 1fr;
}
.ea-sidebar-submenu-inner {
    min-block-size: 0;
    overflow: hidden;
}

/* the parent label is only displayed as the title of the compact mode flyout */
.ea-sidebar-submenu-title {
    display: none;
}

.ea-sidebar-submenu-items {
    /* the thin vertical line that visually relates the subitems to their parent item */
    border-inline-start: var(--border-width) var(--border-style) var(--sidebar-border-color);
    list-style: none;
    margin-block: var(--ea-sp-2);
    margin-inline-start: var(--ea-sp-5);
    padding-inline-start: var(--ea-sp-6);
}
.ea-sidebar-submenu-items .ea-sidebar-item {
    margin-block: var(--ea-sp-2);
    padding-inline-end: 0;
}
.ea-sidebar-submenu-items .ea-sidebar-item-link {
    color: var(--sidebar-menu-submenu-color);
    padding: var(--ea-sp-2) 0;
}
.ea-sidebar-submenu-items .ea-sidebar-item-icon {
    font-size: var(--font-size-base);
    margin-inline-end: var(--ea-sp-2);
}
.ea-sidebar-submenu-items .ea-sidebar-badge {
    margin-inline-end: var(--ea-sp-2);
}
.ea-sidebar-submenu-header {
    color: var(--sidebar-menu-header-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    list-style: none;
    padding: var(--ea-sp-2) 0;
    text-transform: uppercase;
}

/* Tooltip (only displayed in compact mode)
   ========================================================================= */
.ea-sidebar-item-tooltip {
    display: none;
}

/* Compact mode (icon rail, Stripe-style interactions)
   ========================================================================= */
@media (min-width: 992px) {
    body.ea-sidebar-width-compact .ea-sidebar {
        overflow: visible;
        padding: 0;
    }
    /* align the logo with the icon column: it derives from the fixed rail width
       (64px, see .wrapper in base.css) and the fixed --icon-size-lg tile, so it
       must NOT come from the spacing scale or the logo drifts off the icon
       column as soon as --ea-spacing changes */
    body.ea-sidebar-width-compact .ea-sidebar-header {
        padding-inline-start: calc((64px - var(--icon-size-lg)) / 2);
    }
    body.ea-sidebar-width-compact .ea-sidebar-logo .logo-custom {
        display: none;
    }
    body.ea-sidebar-width-compact .ea-sidebar-logo .logo-compact {
        display: block;
    }

    /* arbitrary footer contents can't fit in the icon rail */
    body.ea-sidebar-width-compact .ea-sidebar-footer {
        display: none;
    }

    body.ea-sidebar-width-compact .ea-sidebar-group + .ea-sidebar-group {
        margin-block-start: var(--ea-sp-8);
    }
    body.ea-sidebar-width-compact .ea-sidebar-group-label {
        block-size: 0;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }

    /* hide everything except the icon in top-level items */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-label,
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-chevron,
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item > .ea-sidebar-item-link .ea-sidebar-badge {
        display: none;
    }

    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item {
        border-radius: 0;
        padding: var(--ea-sp-3) 0;
    }
    /* center the icon tile in the rail, whatever the rail width is */
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item > .ea-sidebar-item-link {
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon {
        align-items: center;
        block-size: var(--icon-size-lg);
        display: flex;
        font-size: var(--icon-size-sm);
        inline-size: var(--icon-size-lg);
        justify-content: center;
        line-height: var(--line-height-none);
        margin-inline-end: 0;
        position: relative;
    }

    /* hovering the item reveals a tile slightly larger than the icon box,
       growing and tinting in behind the icon */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon::before {
        background: transparent;
        border-radius: var(--border-radius);
        content: "";
        inset: calc(-1 * var(--ea-sp-2));
        position: absolute;
        scale: 0.75;
        transition: background-color var(--ea-duration-fast) var(--ea-ease-out), scale var(--ea-duration-fast)
            var(--ea-ease-out);
    }

    /* badges are hidden in compact mode, so items with a badge show a small dot
       on the corner of their icon instead */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge)
        .ea-sidebar-item-icon::after {
        background: var(--sidebar-badge-dot-bg);
        block-size: var(--ea-sp-4);
        border: var(--border-width) var(--border-style) var(--sidebar-badge-dot-border-color);
        border-radius: var(--border-radius-full);
        /* the ring separates the dot from the icon strokes below it */
        box-shadow: 0 0 0 2px var(--sidebar-bg);
        content: "";
        inline-size: var(--ea-sp-4);
        inset-block-start: calc(-1 * var(--ea-sp-2));
        inset-inline-end: calc(-1 * var(--ea-sp-2));
        position: absolute;
    }
    /* tint the dot like the badge it replaces (its pale background as the fill and
       its darker text color as the border, so hues stay distinguishable at this
       size); badges without a semantic variant use the default dot colors */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge.badge-primary) {
        --sidebar-badge-dot-bg: var(--badge-primary-bg);
        --sidebar-badge-dot-border-color: var(--badge-primary-color);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge.badge-success) {
        --sidebar-badge-dot-bg: var(--badge-success-bg);
        --sidebar-badge-dot-border-color: var(--badge-success-color);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge.badge-warning) {
        --sidebar-badge-dot-bg: var(--badge-warning-bg);
        --sidebar-badge-dot-border-color: var(--badge-warning-color);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge.badge-danger) {
        --sidebar-badge-dot-bg: var(--badge-danger-bg);
        --sidebar-badge-dot-border-color: var(--badge-danger-color);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge.badge-info) {
        --sidebar-badge-dot-bg: var(--badge-info-bg);
        --sidebar-badge-dot-border-color: var(--badge-info-color);
    }
    /* in dark mode the pale badge backgrounds are semi-transparent and unreadable
       at this size, so the dot is filled with the solid border color instead */
    body.ea-dark-scheme.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link .ea-sidebar-badge)
        .ea-sidebar-item-icon::after {
        background: var(--sidebar-badge-dot-border-color);
    }
    /* center the icon glyph inside the square tile (the inline baseline and the
       'vertical-align: sub' of SVG icons push it down a few pixels otherwise);
       positioning it keeps the glyph painted above the hover tile */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon
        .icon {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon
        svg {
        vertical-align: middle;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:has(> .ea-sidebar-item-link:hover):not(.is-active),
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item.is-active {
        background: none;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link:hover
        .ea-sidebar-item-icon::before,
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item
        > .ea-sidebar-item-link:focus-visible
        .ea-sidebar-item-icon::before {
        background: var(--sidebar-item-icon-tile-hover-bg);
        scale: 1;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.is-active
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon {
        color: var(--sidebar-menu-active-item-color);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.is-active
        > .ea-sidebar-item-link
        .ea-sidebar-item-icon::before {
        background: var(--sidebar-menu-active-item-bg);
        scale: 1;
    }

    /* tooltip with the item label, displayed on the side of the icon */
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:not(.has-submenu)
        .ea-sidebar-item-tooltip {
        background: var(--sidebar-tooltip-bg);
        border-radius: var(--border-radius);
        color: var(--sidebar-tooltip-color);
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        inset-block-start: 50%;
        /* overlap the rail a bit so the tooltip feels attached to its icon */
        inset-inline-start: 100%;
        margin-inline-start: calc(-1 * var(--ea-sp-4));
        opacity: 0;
        padding: var(--ea-sp-2) var(--ea-sp-5);
        pointer-events: none;
        position: absolute;
        translate: 0 -50%;
        transition: opacity var(--ea-duration-fast) var(--ea-ease-out);
        white-space: nowrap;
        z-index: calc(var(--zindex-modal-backdrop) + 2);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:not(.has-submenu):hover
        .ea-sidebar-item-tooltip,
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item:not(.has-submenu):focus-within
        .ea-sidebar-item-tooltip {
        opacity: 1;
    }

    /* while hovered, raise the item above the resizer handler that overlays the last
       pixels of the rail; otherwise the pointer crosses a strip that doesn't belong to
       the item and the :hover chain (and the flyout) is lost on its way to the panel */
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item:hover,
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item:focus-within {
        z-index: 1;
    }

    /* submenus become a flyout panel displayed on the side of the icon; the panel
       overlaps the rail a bit, so the pointer can never fall in a gap between the
       icon and the panel that would close it */
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item.has-submenu > .ea-sidebar-submenu {
        display: block;
        grid-template-rows: none;
        inline-size: max-content;
        inset-block-start: 0;
        inset-inline-start: 100%;
        margin-inline-start: calc(-1 * var(--ea-sp-4));
        max-inline-size: 320px;
        min-inline-size: 200px;
        opacity: 0;
        position: absolute;
        transition: opacity var(--ea-duration-fast) var(--ea-ease-out), visibility 0s linear var(--ea-duration-fast);
        visibility: hidden;
        z-index: calc(var(--zindex-modal-backdrop) + 2);
    }
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item.has-submenu:hover > .ea-sidebar-submenu,
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.has-submenu:focus-within
        > .ea-sidebar-submenu {
        opacity: 1;
        transition-delay: 0s, 0s;
        visibility: visible;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.has-submenu
        > .ea-sidebar-submenu
        > .ea-sidebar-submenu-inner {
        background: var(--dropdown-bg);
        border: var(--border-width) var(--border-style) var(--dropdown-border-color);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--popover-shadow);
        max-block-size: calc(100vh - var(--ea-sp-12));
        overflow-block: auto;
        padding: var(--ea-sp-4);
    }

    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item.has-submenu .ea-sidebar-submenu-title {
        color: var(--sidebar-menu-header-color);
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        padding: var(--ea-sp-2) var(--ea-sp-4) var(--ea-sp-3);
    }

    /* no vertical guide line inside the flyout */
    body.ea-sidebar-width-compact .ea-sidebar-group-items > .ea-sidebar-item.has-submenu .ea-sidebar-submenu-items {
        border-inline-start: 0;
        margin: 0;
        padding-inline-start: 0;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.has-submenu
        .ea-sidebar-submenu-items
        .ea-sidebar-item {
        margin-block: 0;
        padding-inline: 0;
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.has-submenu
        .ea-sidebar-submenu-items
        .ea-sidebar-item-link {
        border-radius: var(--border-radius);
        color: var(--sidebar-menu-color);
        padding: var(--ea-sp-3) var(--ea-sp-4);
    }
    body.ea-sidebar-width-compact
        .ea-sidebar-group-items
        > .ea-sidebar-item.has-submenu
        .ea-sidebar-submenu-items
        .ea-sidebar-item-link:hover {
        background: var(--sidebar-item-hover-bg);
    }
}

/* Resizer handler (toggles between the normal and compact modes)
   ========================================================================= */
#sidebar-resizer-handler {
    cursor: w-resize; /* left arrow: clicking collapses the sidebar */
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
    min-block-size: 100vh;
}
body.ea-sidebar-width-compact #sidebar-resizer-handler {
    cursor: e-resize; /* right arrow: clicking expands the sidebar */
}
/* cursor keywords are physical, so they must be swapped in RTL layouts */
#sidebar-resizer-handler:dir(rtl) {
    cursor: e-resize;
}
body.ea-sidebar-width-compact #sidebar-resizer-handler:dir(rtl) {
    cursor: w-resize;
}

@media (prefers-reduced-motion: reduce) {
    .ea-sidebar-submenu,
    .ea-sidebar-item-chevron,
    .ea-sidebar-item-tooltip,
    .ea-sidebar-item-icon {
        transition: none;
    }
}