@use "../../01-core/external" as *;

@mixin ss-diff {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    isolation: isolate;
    border-radius: var(--ss-radius-md, q(8));
}

@mixin ss-diff-item-1 {
    grid-column-start: 1;
    grid-row-start: 1;
    overflow: hidden;

    width: var(--ss-diff-position, 50%);
    min-width: 0;
    max-width: 100%;

    > * {
        height: 100%;
        width: 100cqi;
        object-fit: cover;
        object-position: left center;
    }
}

@mixin ss-diff-item-2 {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-column-end: 3;
    z-index: -1;

    > * {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@mixin ss-diff-resizer {
    grid-column-start: 2;
    grid-row-start: 1;

    width: q(4);
    height: 100%;
    margin-inline-start: q(-2);

    background: var(--ss-color-accent, currentColor);
    cursor: ew-resize;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: q(28);
        height: q(28);
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: var(--ss-color-accent, currentColor);
    }
}