@scope {
    :scope {
        --genome-spy-basic-spacing: 10px;
        --genome-spy-font-family:
            system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        font-family: var(--genome-spy-font-family);

        position: relative;

        display: flex;
        flex-direction: column;
    }

    .canvas-wrapper {
        position: relative;
        flex-grow: 1;
        overflow: hidden;
    }

    canvas {
        display: block;
        touch-action: none;
        transform: scale(1, 1);
        opacity: 1;
        transition:
            transform 0.6s,
            opacity 0.6s;

        &:focus,
        &:focus-visible {
            outline: none;
        }
    }

    .loading {
        > canvas {
            transform: scale(0.95, 0.95);
            opacity: 0;
        }
    }

    .loading-indicators {
        position: absolute;
        inset: 0;

        user-select: none;
        pointer-events: none;

        div {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;

            > div {
                font-size: 11px;
                transition: opacity 0.2s;
                background: white;
                padding: 2px 5px;
                display: flex;
                border-radius: 3px;
                gap: 0.5em;
                opacity: 0;

                &.loading {
                    opacity: 0.5;
                }

                &.error {
                    opacity: 0.8;
                    color: firebrick;
                }

                > * {
                    display: block;
                }

                img {
                    width: 1.5em;
                    height: 1.5em;
                }
            }
        }
    }

    .tooltip {
        position: absolute;

        max-width: 450px;
        overflow: hidden;

        --background-color: #f6f6f6;
        background: var(--background-color);
        padding: var(--genome-spy-basic-spacing);

        --font-size: 12px;
        font-size: var(--font-size);

        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);

        &:not(.sticky) {
            pointer-events: none;
        }

        transition:
            outline-color 0.3s ease-in-out,
            box-shadow 0.3s ease-in-out;

        outline: 0px solid transparent;
        &.sticky {
            outline: 2px solid black;
            box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
        }

        z-index: 100;

        > :last-child {
            margin-bottom: 0;
        }

        > .title {
            padding-bottom: calc(var(--genome-spy-basic-spacing) / 2);
            margin-bottom: calc(var(--genome-spy-basic-spacing) / 2);
            border-bottom: 1px dashed var(--background-color);
            border-bottom: 1px dashed
                color-mix(in srgb, black 25%, var(--background-color));
        }

        .summary {
            font-size: 12px;
        }

        table {
            &:first-child {
                margin-top: 0;
            }

            border-collapse: collapse;

            th,
            td {
                padding: 2px 0.4em;
                vertical-align: top;
                font-size: var(--font-size);

                &:first-child {
                    padding-left: 0;
                }
            }

            th {
                text-align: left;
                font-weight: bold;
            }
        }

        .color-legend {
            display: inline-block;
            width: 0.8em;
            height: 0.8em;
            margin-left: 0.4em;
            box-shadow: 0px 0px 3px 1px white;
        }

        .color-legend-unmapped {
            background-color: transparent;
            border: 1px solid black;
            box-sizing: border-box;
            box-shadow: none;
        }

        .attributes {
            .hovered {
                background-color: #e0e0e0;
            }
        }

        .na {
            color: #aaa;
            font-style: italic;
            font-size: 80%;
        }
    }

    .gene-track-tooltip {
        .summary {
            font-size: 90%;
        }
    }

    .gs-input-binding {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 1em;
        row-gap: 0.3em;
        justify-items: start;

        > select,
        > input:not([type="checkbox"]) {
            width: 100%;
        }

        input[type="range"] + span {
            display: inline-block;
            margin-left: 0.3em;
            min-width: 2.2em;
            font-variant-numeric: tabular-nums;
        }

        input[type="range"],
        input[type="radio"] {
            vertical-align: text-bottom;
        }

        .radio-group {
            display: flex;
            align-items: center;
        }

        .description {
            max-width: 26em;
            grid-column: 1 / -1;
            color: #777;
            font-size: 90%;
            margin-top: -0.5em;
        }
    }

    .gs-input-bindings {
        flex-basis: content;
        font-size: 14px;
        padding: var(--genome-spy-basic-spacing);
    }

    .message-box {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;

        > div {
            border: 1px solid red;
            padding: 10px;
            background: #fff0f0;
        }
    }
}