.sidebarPanel {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    height: 100%;
    padding: 0;
    transition:
        width var(--ease-shell),
        min-width var(--ease-shell),
        max-width var(--ease-shell);
}

.sidebarPanel__collapsedToggle {
    width: var(--navbar);
    min-width: var(--navbar);
    max-width: var(--navbar);
    height: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    display: none;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    color: var(--c-icon-muted);
    background: var(--c-surface-glass);
    border: 0;
    border-left: var(--border-2) solid var(--c-border);
    border-radius: 0;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast);
}

.sidebarPanel__collapsedToggle:hover,
.sidebarPanel__collapsedToggle:focus-visible {
    color: var(--c-accent);
    background: transparent;
}

.sidebarPanel__content {
    width: 100%;
    min-width: 0;
    max-width: var(--sidebar);
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-surface-glass);
    border: 0;
    border-left: var(--border-2) solid var(--c-border);
    border-radius: 0;
    box-shadow: none;
}

.sidebarPanel__header {
    flex: 0 0 auto;
    height: var(--header);
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    border-bottom: var(--border-1) solid var(--c-border);
    background: transparent;
}

.sidebarPanel__toggleGroup {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

.sidebarPanel__toggleGroup > * + * {
    position: relative;
}

.sidebarPanel__toggleGroup > * + *::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--border-1);
    background: var(--c-border);
    pointer-events: none;
}

.sidebarPanel__mediaTabs {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sidebarPanel__mediaTab {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-2);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--c-font-muted);
    font: var(--font-button);
    cursor: pointer;
    transition: background var(--ease-fast), color var(--ease-fast);
}

.sidebarPanel__mediaTab + .sidebarPanel__mediaTab {
    border-left: var(--border-1) solid var(--c-border);
}

.sidebarPanel__mediaTab:hover,
.sidebarPanel__mediaTab.is-active {
    color: var(--c-font);
}

.sidebarPanel__mediaTab.is-active {
    background: var(--c-control-active-bg);
}

.sidebarPanel__toggle {
    gap: var(--gap-1);
    min-width: calc(var(--navbar) - (var(--pad-1) * 2));
    min-height: 0;
    padding: 0 var(--pad-1);
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

.sidebarPanel__toggle--close {
    width: var(--navbar);
    min-width: var(--navbar);
    padding: 0;
    flex: 0 0 var(--navbar);
}

.sidebarPanel__infoButton {
    width: var(--header);
    min-width: var(--header);
    padding: 0;
    flex: 0 0 var(--header);
}

.sidebarPanel__infoIcon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
    background-color: currentColor;
    mask: url("../../../public/assets/icons/ui/info.svg") center / contain no-repeat;
    -webkit-mask: url("../../../public/assets/icons/ui/info.svg") center / contain no-repeat;
}

.sidebarPanel__toggleGlyph {
    width: calc(var(--navbar) - (var(--pad-1) * 2));
    height: calc(var(--navbar) - (var(--pad-1) * 2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: currentColor;
    mask-image: url("../../../public/assets/icons/ui/arrow.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 18px;
    -webkit-mask-image: url("../../../public/assets/icons/ui/arrow.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px 18px;
    transition: transform var(--ease-shell);
}

.sidebarPanel__collapsedToggle .sidebarPanel__toggleGlyph {
    transform: rotate(180deg);
}

.sidebarPanel__main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

.sidebarPanel__scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 0;
    padding-block-end: var(--pad-2);
    scroll-padding-block-end: var(--pad-2);
    scrollbar-gutter: auto;
    overscroll-behavior: contain;
}

.sidebarPanel__scroll.is-scrollable {
    scrollbar-gutter: stable;
}

.sidebarModule,
.panel {
    display: grid;
    gap: calc(var(--gap-1) * 2);
    padding: calc(var(--pad-2) * 2);
    background: var(--c-surface-glass);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-1);
}

.sidebarModule__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-1);
}

.sidebarModule__title,
.sidebarControlSection__title,
.panel h2 {
    margin: 0;
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
}

.sidebarSection {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.sidebarSection--list {
    padding: var(--pad-2);
}

.sidebarSection--controls {
    padding: 0;
    overflow: visible;
}

.sidebarListSection__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-1);
}

.sidebarPanel__scroll > .sidebarSection:not([hidden]) + .sidebarSection:not([hidden]) {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarPanel__scroll > .sidebarSection--list:not([hidden]) ~ .sidebarMediaTabPanel:not([hidden]) {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarListSection__toggle {
    min-height: var(--btn-slim-h);
    padding: 0 var(--pad-1);
    border-radius: var(--radius-3);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
}

.sidebarListSection__toggle:disabled {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.sidebarListSection__toggle.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.sidebarImageList {
    flex: 0 0 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-1);
}

.sidebarImageList.is-expanded {
    overflow-y: hidden;
}

.sidebarImageList--comparePanel {
    flex: 1 1 auto;
    align-content: flex-start;
}

.sidebarImageRow {
    --sidebar-slot-action-size: var(--media-action-size);
    --sidebar-slot-action-cluster-w: calc(var(--sidebar-slot-action-size) * 3);
    --media-list-type-icon-size: var(--sidebar-slot-action-size);
    width: 100%;
    position: relative;
}

.sidebarControlsLayout {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.sidebarMediaTabPanel[hidden] {
    display: none;
}