.viewCube {
    --view-cube-face-x: rgb(184, 190, 198);
    --view-cube-face-y: rgb(224, 228, 232);
    --view-cube-face-z: rgb(204, 210, 216);
    --view-cube-face-edge: rgba(24, 28, 34, 0.88);
    --view-cube-axis-label: rgb(18, 20, 24);

    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: var(--border-1) solid color-mix(in srgb, var(--c-border) 72%, transparent);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--c-surface-solid) 78%, transparent);
    box-shadow: var(--shadow-1);
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.viewCube--panel {
    position: absolute;
    right: var(--pad-3);
    bottom: var(--pad-3);
    z-index: calc(var(--z-ui) + 3);
    width: min(96px, calc(100% - (var(--pad-3) * 2)));
    height: min(86px, calc(100% - (var(--pad-3) * 2)));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.viewCube,
.viewCube * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.viewCube [role="button"]:focus,
.viewCube [role="button"]:focus-visible {
    outline: none;
}

.viewCube--sidebar {
    width: 100%;
    height: 116px;
    border-color: color-mix(in srgb, var(--c-border) 54%, transparent);
    background: color-mix(in srgb, var(--c-surface-solid) 54%, transparent);
    box-shadow: none;
    overflow: visible;
}

.viewCube__svg {
    display: block;
    max-width: none;
    overflow: visible;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.24));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.viewCube--panel .viewCube__svg {
    width: 96px;
    height: 84px;
}

.viewCube--sidebar .viewCube__svg {
    width: 116px;
    height: 100px;
}

.viewCube__toggle {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: var(--panel-action-size);
    height: var(--panel-action-size);
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--c-font-muted);
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.viewCube__toggle:hover,
.viewCube__toggle:focus-visible {
    color: var(--c-font);
    outline: none;
}

.viewCube__toggleIcon {
    width: calc(var(--panel-action-size) * 0.62);
    height: calc(var(--panel-action-size) * 0.62);
    display: block;
    background-color: currentColor;
    mask: url("../../../public/assets/icons/panels/close.svg") center / contain no-repeat;
    -webkit-mask: url("../../../public/assets/icons/panels/close.svg") center / contain no-repeat;
}

.viewCube.is-collapsed .viewCube__svg {
    display: none;
}

.viewCube.is-collapsed .viewCube__toggleIcon {
    mask-image: url("../../../public/assets/icons/ui/plus.svg");
    -webkit-mask-image: url("../../../public/assets/icons/ui/plus.svg");
}

.viewCube__face,
.viewCube__edge,
.viewCube__corner,
.viewCube__axisControl {
    cursor: pointer;
    transition:
        fill var(--ease-fast),
        stroke var(--ease-fast),
        opacity var(--ease-fast),
        filter var(--ease-fast);
}

.viewCube__axisControl {
    pointer-events: visiblePainted;
}

.viewCube__face {
    stroke: var(--view-cube-face-edge);
    stroke-width: 2.5;
    stroke-linejoin: round;
    pointer-events: visiblePainted;
}

.viewCube__face--left,
.viewCube__face--right {
    fill: var(--view-cube-face-x);
}

.viewCube__face--top,
.viewCube__face--bottom {
    fill: var(--view-cube-face-y);
}

.viewCube__face--front,
.viewCube__face--back {
    fill: var(--view-cube-face-z);
}

.viewCube__face:hover,
.viewCube__face:focus-visible,
.viewCube__face.is-active {
    fill: color-mix(in srgb, var(--c-accent) 40%, var(--view-cube-face-z));
    stroke: color-mix(in srgb, var(--c-accent) 86%, white);
    filter: brightness(1.05);
    outline: none;
}

.viewCube__edge {
    fill: var(--view-cube-face-edge);
    opacity: 0;
    pointer-events: all;
}

.viewCube__edge:hover,
.viewCube__edge:focus-visible {
    fill: color-mix(in srgb, var(--c-accent) 72%, transparent);
    opacity: 1;
    outline: none;
}

.viewCube__corner {
    fill: var(--view-cube-face-edge);
    stroke: transparent;
    stroke-width: 1.5;
    opacity: 0;
    pointer-events: all;
}

.viewCube__corner:hover,
.viewCube__corner:focus-visible {
    fill: color-mix(in srgb, var(--c-accent) 78%, white);
    stroke: color-mix(in srgb, var(--c-accent) 88%, white);
    opacity: 1;
    outline: none;
}

.viewCube__axisLine {
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.72;
    pointer-events: none;
    transition: opacity var(--ease-fast);
}

.viewCube__axisLine--x {
    stroke: var(--c-axis-x);
}

.viewCube__axisLine--y {
    stroke: var(--c-axis-y);
}

.viewCube__axisLine--z {
    stroke: var(--c-axis-z);
}

.viewCube__axisButton {
    stroke: color-mix(in srgb, currentColor 78%, black);
    stroke-width: 1.5;
}

.viewCube__axisControl--x {
    color: var(--c-axis-x);
}

.viewCube__axisControl--y {
    color: var(--c-axis-y);
}

.viewCube__axisControl--z {
    color: var(--c-axis-z);
}

.viewCube__axisControl .viewCube__axisButton {
    fill: currentColor;
}

.viewCube__axisControl:hover .viewCube__axisButton,
.viewCube__axisControl:focus-visible .viewCube__axisButton,
.viewCube__axisControl.is-active .viewCube__axisButton {
    stroke: color-mix(in srgb, var(--c-accent) 88%, white);
    stroke-width: 3;
    filter: brightness(1.2);
}

.viewCube__axisControl:focus-visible {
    outline: none;
}

.viewCube__axisLabel {
    fill: var(--view-cube-axis-label);
    font: 700 var(--fs-console) / 1 var(--font-ui);
    pointer-events: none;
}

.sidebarControl.sidebarControl--viewCube {
    height: auto;
    min-height: calc((var(--sidebar-control-height) * 4) + (var(--gap-1) * 3));
    grid-row: span 4;
    align-items: stretch;
    padding: var(--sidebar-control-inset);
}

.sidebarViewCube__header {
    min-width: 0;
    min-height: var(--sidebar-control-height);
    display: flex;
    align-items: center;
    padding: 0 calc(var(--sidebar-control-inset) * 3);
    pointer-events: none;
}

.sidebarViewCube__header .sidebarControl__text {
    width: 100%;
    text-align: left;
}

@container panel-item (max-width: 225px) {
    .viewCube--panel {
        display: none;
    }
}

@media (max-height: 480px) {
    .viewCube--panel {
        display: none;
    }
}

@media (max-width: 640px) {
    .viewCube--panel {
        width: min(124px, calc(100% - (var(--pad-3) * 2)));
        height: min(110px, calc(100% - (var(--pad-3) * 2)));
    }

    .viewCube--panel .viewCube__svg {
        width: 124px;
        height: 108px;
    }
}