@scope ([svui]) {
    /* SVUI Compare widget */
    [sv-ui="compare"] {
        --svui-compare-position: 50%;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        outline: 0;
    }

    [sv-ui="compare"] > [data-svui-compare-layer] {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    [sv-ui="compare"] > [data-svui-compare-layer="before"] {
        position: relative;
        z-index: 1;
    }

    [sv-ui="compare"] > [data-svui-compare-layer="after"] {
        position: absolute;
        z-index: 2;
        inset: 0;
        clip-path: inset(0 0 0 var(--svui-compare-position));
    }

    [sv-ui="compare"][data-svui-compare-orientation="vertical"] > [data-svui-compare-layer="after"] {
        clip-path: inset(0 0 calc(100% - var(--svui-compare-position)) 0);
    }

    [sv-ui="compare"] > [sv-role="handle"] {
        position: absolute;
        z-index: 3;
        top: 0;
        bottom: 0;
        left: var(--svui-compare-position);
        width: 2px;
        background: var(--sv-compare-handle-color, #ffffff);
        box-shadow: 0 0 0 1px var(--sv-compare-handle-border, rgba(0, 0, 0, 0.18));
        cursor: ew-resize;
        touch-action: none;
        transform: translateX(-50%);
    }

    [sv-ui="compare"] > [sv-role="handle"]::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--sv-compare-handle-size, 2.75rem);
        height: var(--sv-compare-handle-size, 2.75rem);
        border: 2px solid var(--sv-compare-handle-color, #ffffff);
        border-radius: 50%;
        background: var(--sv-compare-handle-background, rgba(0, 0, 0, 0.38));
        box-shadow: 0 0 0 1px var(--sv-compare-handle-border, rgba(0, 0, 0, 0.18));
        content: "";
        transform: translate(-50%, -50%);
        transition: background-color 160ms ease, box-shadow 160ms ease;
    }

    [sv-ui="compare"] > [sv-role="handle"]:focus {
        outline: 0;
    }

    [sv-ui="compare"] > [sv-role="handle"]:focus-visible::before {
        background: var(--sv-compare-handle-focus-background, rgba(0, 0, 0, 0.62));
        box-shadow: 0 0 0 3px var(--sv-compare-focus-color, rgba(255, 255, 255, 0.9));
    }

    [sv-ui="compare"] > [sv-role="handle"] > [sv-role="decrease"],
    [sv-ui="compare"] > [sv-role="handle"] > [sv-role="increase"] {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 0.75rem;
        height: 0.75rem;
        background-color: var(--sv-compare-icon-color, #ffffff);
        content: "";
        transform: translateY(-50%);
        -webkit-mask: center / contain no-repeat;
        mask: center / contain no-repeat;
        pointer-events: none;
    }

    [sv-ui="compare"] > [sv-role="handle"] > [sv-role="decrease"] {
        right: 0.25rem;
        -webkit-mask-image: url("../icons/chevron-left.svg");
        mask-image: url("../icons/chevron-left.svg");
    }

    [sv-ui="compare"] > [sv-role="handle"] > [sv-role="increase"] {
        left: 0.25rem;
        -webkit-mask-image: url("../icons/chevron-right.svg");
        mask-image: url("../icons/chevron-right.svg");
    }

    [sv-ui="compare"] > [sv-role="before-label"],
    [sv-ui="compare"] > [sv-role="after-label"] {
        position: absolute;
        z-index: 4;
        top: var(--sv-compare-label-offset, 0.75rem);
        max-width: calc(50% - 1rem);
        padding: 0.3rem 0.55rem;
        border-radius: 999px;
        background: var(--sv-compare-label-background, rgba(0, 0, 0, 0.56));
        color: var(--sv-compare-label-color, #ffffff);
        font-size: var(--sv-compare-label-font-size, 0.75rem);
        font-weight: 600;
        line-height: 1.2;
        pointer-events: none;
    }

    [sv-ui="compare"] > [sv-role="before-label"] {
        left: var(--sv-compare-label-offset, 0.75rem);
    }

    [sv-ui="compare"] > [sv-role="after-label"] {
        right: var(--sv-compare-label-offset, 0.75rem);
    }

    [sv-ui="compare"][data-svui-compare-orientation="vertical"] > [sv-role="handle"] {
        top: var(--svui-compare-position);
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 2px;
        cursor: ns-resize;
        transform: translateY(-50%);
    }

    [sv-ui="compare"][data-svui-compare-orientation="vertical"] > [sv-role="handle"] > [sv-role="decrease"],
    [sv-ui="compare"][data-svui-compare-orientation="vertical"] > [sv-role="handle"] > [sv-role="increase"] {
        display: none;
    }
}