.sidebarActionGrid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--gap-1);
    align-items: stretch;
}

.sidebarControlSection,
.sidebarSection.sidebarControlSection {
    --sidebar-section-color: var(--c-accent);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/controls.svg");

    display: grid;
    gap: 0;
    overflow: visible;
    border-top: var(--border-1) solid color-mix(in srgb, var(--c-border) 82%, transparent);
    background: color-mix(in srgb, var(--c-surface-glass) 82%, transparent);
}

.sidebarControlSection[data-section-id="file"] {
    --sidebar-section-color: var(--c-section-file);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/file.svg");
}

.sidebarControlSection[data-section-id="media-list"] {
    --sidebar-section-color: var(--c-section-media-list);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/media-list.svg");
}

.sidebarControlSection[data-section-id="filter"] {
    --sidebar-section-color: var(--c-section-filter);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/filter.svg");
}

.sidebarControlSection[data-section-id="analytics"] {
    --sidebar-section-color: var(--c-section-analytics);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/analytics.svg");
}

.sidebarControlSection[data-section-id="controls"] {
    --sidebar-section-color: var(--c-section-controls);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/controls.svg");
}

.sidebarControlSection[data-section-id="difference"] {
    --sidebar-section-color: var(--c-section-controls);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/difference.svg");
}

.sidebarControlSection[data-section-id="view"] {
    --sidebar-section-color: var(--c-section-view);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/view.svg");
}

.sidebarControlSection[data-section-id="3d-camera"] {
    --sidebar-section-color: var(--c-section-3d-camera);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/camera.svg");
}

.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-view-presets"] {
    grid-column: 1 / span 4;
}

.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-frame-all"],
.sidebarControlSection[data-section-id="3d-camera"] [data-control-id="3d-reset-camera"] {
    grid-column: 5 / span 4;
}

.sidebarControlSection[data-section-id="lighting"] {
    --sidebar-section-color: var(--c-section-lighting);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/lighting.svg");
}

.sidebarControlSection[data-section-id="shading"] {
    --sidebar-section-color: var(--c-section-shading);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/shading.svg");
}

.sidebarControlSection[data-section-id="3d-mesh"] {
    --sidebar-section-color: var(--c-section-3d-mesh);
    --sidebar-section-icon: url("../../../public/assets/icons/sidebar/sections/mesh.svg");
}

.sidebarControlsLayout > .sidebarControlSection:first-child {
    border-top: 0;
}

.sidebarControlSection__summary {
    min-height: var(--sidebar-section-header-height);
    display: grid;
    grid-template-columns: var(--sidebar-section-icon-size) minmax(0, 1fr) var(--sidebar-section-icon-size);
    align-items: center;
    gap: var(--gap-1);
    padding: 0 var(--pad-2);
    color: var(--c-font-muted);
    background: transparent;
    border-bottom: var(--border-1) solid transparent;
    cursor: pointer;
    list-style: none;
    transition:
        color var(--ease-fast),
        background-color var(--ease-fast),
        border-color var(--ease-fast);
}

.sidebarControlSection__summary::-webkit-details-marker {
    display: none;
}

.sidebarControlSection__summary:hover {
    color: var(--c-font);
    background: color-mix(in srgb, var(--sidebar-section-color) 7%, transparent);
}

.sidebarControlSection__summary:focus-visible {
    outline: var(--border-2) solid color-mix(in srgb, var(--sidebar-section-color) 82%, var(--c-font));
    outline-offset: calc(0px - var(--border-2));
}

.sidebarControlSection[open] > .sidebarControlSection__summary {
    color: var(--c-font);
    border-bottom-color: color-mix(in srgb, var(--sidebar-section-color) 28%, var(--c-border));
    background: linear-gradient(
        90deg,
        var(--c-surface-glass),
        color-mix(in srgb, var(--sidebar-section-color) 32%, var(--c-surface-glass))
    );
}

.sidebarControlSection__icon {
    width: calc(var(--sidebar-section-icon-size) - 2px);
    height: calc(var(--sidebar-section-icon-size) - 2px);
    justify-self: center;
    background: var(--sidebar-section-color);
    -webkit-mask-image: var(--sidebar-section-icon);
    mask-image: var(--sidebar-section-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-mode: alpha;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sidebar-section-color) 18%, transparent));
    opacity: 0.72;
    transition: opacity var(--ease-fast), filter var(--ease-fast);
}

.sidebarControlSection__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-1);
    margin: 0;
    overflow: hidden;
    color: currentColor;
    font: var(--font-button);
    text-transform: uppercase;
    letter-spacing: var(--title-letter-spacing);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarControlSection__title::after {
    content: "";
    min-width: 12px;
    flex: 1;
    height: var(--border-1);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--sidebar-section-color) 32%, var(--c-border)),
        color-mix(in srgb, var(--c-border) 42%, transparent)
    );
    opacity: 0.72;
}

.sidebarControlSection__state {
    width: var(--sidebar-section-icon-size);
    height: var(--sidebar-section-icon-size);
    justify-self: end;
    display: block;
    background: currentColor;
    mask: url("../../../public/assets/icons/ui/plus.svg") center / contain no-repeat;
    -webkit-mask: url("../../../public/assets/icons/ui/plus.svg") center / contain no-repeat;
    opacity: 0.7;
}

.sidebarControlSection[open] .sidebarControlSection__icon,
.sidebarControlSection__summary:hover .sidebarControlSection__icon {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sidebar-section-color) 34%, transparent));
    opacity: 1;
}

.sidebarControlSection[open] .sidebarControlSection__state {
    color: var(--sidebar-section-color);
    opacity: 0.9;
    mask-image: url("../../../public/assets/icons/ui/minus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/minus.svg");
}

.sidebarSection.sidebarControlSection,
.sidebarSection--list.sidebarControlSection {
    padding: 0;
}

.sidebarControlSection__body {
    --sidebar-section-content-accent: color-mix(
        in srgb,
        var(--sidebar-section-color) 16%,
        var(--c-surface-glass)
    );
    --sidebar-section-content-background: linear-gradient(
        to bottom,
        var(--sidebar-section-content-accent),
        var(--c-surface-glass)
    );
    --c-accent: var(--sidebar-section-color);
    --c-slider-fill: color-mix(in srgb, var(--sidebar-section-color) 72%, var(--c-font-muted));
    --c-control-hover-bg: color-mix(in srgb, var(--sidebar-section-color) 8%, var(--c-surface-interactive));
    --c-control-active-bg: color-mix(in srgb, var(--sidebar-section-color) 12%, var(--c-surface-interactive));
    --c-control-hover-bg-solid: color-mix(in srgb, var(--sidebar-section-color) 8%, var(--c-surface-solid));
    --c-control-active-bg-solid: color-mix(in srgb, var(--sidebar-section-color) 12%, var(--c-surface-solid));
    --c-control-hover-border: color-mix(in srgb, var(--sidebar-section-color) 72%, var(--c-border));
    --c-focus-ring: color-mix(in srgb, var(--sidebar-section-color) 82%, var(--c-font));

    padding: var(--pad-2);
    background: var(--sidebar-section-content-background);
}

.sidebarActionGrid__button {
    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1);
    padding: 0 var(--pad-1);
    overflow: hidden;
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    isolation: isolate;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast);
}

.sidebarActionGrid__button > * {
    position: relative;
    z-index: 1;
}

.sidebarActionGrid__button--placeholder {
    cursor: default;
    user-select: none;
}

.sidebarActionGrid__button:not(.sidebarActionGrid__button--placeholder):hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-hover-bg);
}

.sidebarActionGrid__button.is-active {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarActionGrid__item {
    min-width: 0;
}

.sidebarActionGrid__item--span1 {
    grid-column: span 1;
}

.sidebarActionGrid__item--span2 {
    grid-column: span 2;
}

.sidebarActionGrid__item--span3 {
    grid-column: span 3;
}

.sidebarActionGrid__item--span4 {
    grid-column: span 4;
}

.sidebarActionGrid__item--span5 {
    grid-column: span 5;
}

.sidebarActionGrid__item--span6 {
    grid-column: span 6;
}

.sidebarActionGrid__item--span7 {
    grid-column: span 7;
}

.sidebarActionGrid__item--span8 {
    grid-column: 1 / -1;
}

.sidebarActionGrid__button--iconOnly {
    padding: 0;
}

.sidebarActionGrid__button--withIcon {
    justify-content: flex-start;
}

.sidebarActionGrid__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    display: inline-block;
    flex: 0 0 var(--icon-size-md);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.sidebarActionGrid__icon--cursor {
    background-image: url("../../../public/assets/icons/sidebar/controls/cursor.svg");
}

.sidebarActionGrid__icon--greyscale {
    background-image: url("../../../public/assets/icons/sidebar/controls/greyscale.svg");
}

.sidebarActionGrid__icon--pixelated {
    background-image: url("../../../public/assets/icons/sidebar/controls/pixelate.svg");
}

.sidebarActionGrid__icon--reset {
    background-image: url("../../../public/assets/icons/sidebar/controls/reset.svg");
}

.sidebarActionGrid__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarActionGrid__button--slider {
    justify-content: space-between;
}

.sidebarExampleDropdown {
    min-width: 0;
    position: relative;
    z-index: 3;
}

.sidebarExampleDropdown[open] {
    z-index: 5;
}

.sidebarExampleDropdown__trigger {
    min-width: 0;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    background: var(--c-surface-interactive);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-2);
    color: var(--c-font);
    font: var(--font-button);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    list-style: none;
    transition:
        background-color var(--ease-fast),
        color var(--ease-fast),
        border-color var(--ease-fast);
}

.sidebarExampleDropdown__trigger::-webkit-details-marker {
    display: none;
}

.sidebarExampleDropdown__trigger:hover,
.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.sidebarExampleDropdown.is-active > .sidebarExampleDropdown__trigger {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarExampleDropdown__text {
    min-width: 0;
    display: grid;
    gap: 1px;
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarExampleDropdown__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebarExampleDropdown__arrow {
    flex-basis: var(--sidebar-control-icon);
}

.sidebarExampleDropdown__trigger:hover .sidebarDropdownIcon,
.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger .sidebarDropdownIcon {
    color: var(--c-accent);
    opacity: 1;
}

.sidebarExampleDropdown[open] > .sidebarExampleDropdown__trigger .sidebarDropdownIcon {
    --sidebar-dropdown-icon-scale-y: 1.08;
}

.sidebarExampleDropdown__menu {
    position: absolute;
    top: calc(100% + var(--gap-1));
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    overflow: hidden;
    background: var(--c-surface-solid);
    border: var(--border-1) solid var(--c-border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
}

.sidebarExampleDropdown__item {
    width: 100%;
    height: var(--sidebar-control-height);
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sidebar-control-inset);
    padding: var(--sidebar-control-inset);
    background: var(--c-surface-interactive);
    border-radius: 0;
    color: var(--c-font);
    font: var(--font-button);
    text-align: left;
    cursor: pointer;
}

.sidebarExampleDropdown__itemText {
    margin-left: calc(var(--sidebar-control-inset) * 3);
}

.sidebarExampleDropdown__item + .sidebarExampleDropdown__item {
    border-top: var(--border-1) solid var(--c-border);
}

.sidebarExampleDropdown__item:hover {
    color: var(--c-accent);
    background: var(--c-control-hover-bg);
}

.sidebarExampleDropdown__item.is-selected {
    color: var(--c-accent);
    background: var(--c-control-active-bg);
}

.sidebarActionGrid__slider {
    min-width: 72px;
    flex: 0 0 72px;
    position: relative;
    height: 14px;
    display: inline-flex;
    align-items: center;
}

.sidebarActionGrid__sliderTrack,
.sidebarActionGrid__sliderThumb {
    position: absolute;
    display: block;
}

.sidebarActionGrid__sliderTrack {
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-font-muted) 60%, transparent);
}

.sidebarActionGrid__sliderThumb {
    top: 50%;
    left: calc(60% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c-font);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-font) 15%, transparent);
    transform: translateY(-50%);
}

.sidebarMediaListSection__body {
    display: grid;
    gap: var(--gap-1);
}

.sidebarListSection__toggle[hidden] {
    display: none;
}