/* Sidebar pins (_Sidebar.cshtml + script-init/navigationpins-init.ts).
   Layout only - colours come from the theme's sidebar tokens. */

.s-sidebar .s-sidebar-pinned {
    padding-bottom: 0.5rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* Serenity gives section titles 1.5rem on top; under Claim Search that doubles up. */
.s-sidebar .s-sidebar-pinned > .s-sidebar-section-title {
    margin-top: 0;
}

.s-sidebar .s-sidebar-pinned.is-collapsed {
    padding-bottom: 0.25rem;
}

/* The title is the collapse toggle: a bare button that looks like the title it sits in. */
.s-sidebar .s-sidebar-pinned-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    text-align: start;
}

.s-sidebar .s-sidebar-pinned-toggle > .fa {
    width: 0.75rem;
    transition: transform 0.2s;
}

.s-sidebar .s-sidebar-pinned.is-collapsed .s-sidebar-pinned-toggle > .fa {
    transform: rotate(-90deg);
}

.s-sidebar .s-sidebar-pinned.is-collapsed > ul,
.s-sidebar .s-sidebar-pinned:not(.is-collapsed) .s-sidebar-pinned-count {
    display: none;
}

.s-sidebar .s-sidebar-pinnable {
    position: relative;
}

.s-sidebar .s-sidebar-pinnable > .s-sidebar-link {
    padding-right: 2rem;
}

.s-sidebar .s-sidebar-pin {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.125rem 0.375rem;
    border: 0;
    background: none;
    line-height: 1.25rem;
    color: var(--s-sidebar-icon);
    visibility: hidden;
}

/* In the menu a pinned item keeps its tack showing; in the Pinned list every item is
   pinned, so there it only appears on hover like the others. */
.s-sidebar .s-sidebar-pin.is-pinned {
    visibility: visible;
    color: var(--s-sidebar-icon-active);
}

.s-sidebar .s-sidebar-pinned .s-sidebar-pin {
    visibility: hidden;
}

.s-sidebar .s-sidebar-pinnable:hover > .s-sidebar-pin,
.s-sidebar .s-sidebar-pin:focus-visible {
    visibility: visible;
}

.s-sidebar .s-sidebar-pin:hover {
    color: var(--s-sidebar-icon-active);
}

/* Tack = pin. A cross = unpin: always in the Pinned list, and on hover over a pinned tack in the menu. */
.s-sidebar .s-sidebar-pin-off,
.s-sidebar .s-sidebar-pin.is-pinned:hover > .s-sidebar-pin-on,
.s-sidebar .s-sidebar-pinned .s-sidebar-pin-on {
    display: none;
}

.s-sidebar .s-sidebar-pin.is-pinned:hover > .s-sidebar-pin-off,
.s-sidebar .s-sidebar-pinned .s-sidebar-pin-off {
    display: inline-block;
}

.s-sidebar .s-sidebar-pinned .s-sidebar-pinnable.is-dragging {
    background-color: var(--bs-tertiary-bg);
}

@media (hover: none) {
    .s-sidebar .s-sidebar-pinnable > .s-sidebar-pin {
        visibility: visible;
    }
}

.s-sidebar .s-sidebar-pinned .s-sidebar-link-text {
    flex-direction: column;
    align-items: flex-start;
}

.s-sidebar .s-sidebar-pin-context {
    color: var(--s-sidebar-icon);
    font-size: .875em;
    font-weight: 400;
}

.s-sidebar .s-sidebar-pin-context:empty {
    display: none;
}