view-stereogram {
    display: block;
    background: #000;
    border-radius: 0.5em;
    padding: 1em;
    color: white;
    font-size: 0.8em;

    & fieldset {
        display: grid;
        max-height: 100vh;
        max-width: 100%;
        grid-template-rows: auto 1fr 2em;
        grid-template-columns: auto 1fr 3em;
        gap: 1em;

        border: 0;
        padding: 0;

        & legend {
            position: absolute;
            left: -1000vmax;
        }

        & label {
            display: unset;
        }

        & canvas {
            grid-column: 1 / 3;
            grid-row: 1 / 3;
            width: 100%;
            max-height: calc(100vh - 5em);
        }

        & label.invert {
            grid-column: 3 / 4;
            grid-row: 1 / 2;
            justify-content: start;
            display: flex;
            flex-direction: column;

            & span {
                flex: 0 0 1em;
            }
        }

        & label.show-depth {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
            justify-content: start;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;

            & span {
                flex: 0 0 1em;
            }
        }

        & label.contrast {
            grid-column: 3 / 4;
            grid-row: 2 / 3;
            display: flex;
            flex-direction: column-reverse;
            justify-content: end;
            align-items: center;

            & span {
                flex: 0 0 1em;
            }

            & input {
                flex: 1 0 1em;
                appearance: slider-vertical;
                width: 100%;
            }
        }

        & label.pattern-width {
            grid-column: 2 / 3;
            grid-row: 3 / 4;
            display: flex;
            flex-direction: row;
            align-items: center;

            & span {
                flex: 0 0 1em;
                white-space: nowrap;
            }

            & input {
                flex: 1 0 1em;
            }
        }

        & label.show-depth:has(input:not(:checked)) ~ canvas.depth {
            display: none;
        }

        & a {
            grid-column: 3 / 4;
            grid-row: 3 / 4;

            color: #0cc;
        }
    }

    &.no-width fieldset {
        canvas {
            grid-row: 1 / 4;
        }

        label.show-depth,
        label.pattern-width {
            display: none;
        }
    }

    &:not([invert]) canvas.depth {
        filter: invert(1);
    }
}