@use '~flux/components/css/mixin';

.splitView {
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.splitViewHorizontal {
    composes: splitView;

    grid-auto-flow: column;
}

.splitViewVertical {
    composes: splitView;

    grid-auto-flow: row;
}

.splitViewDragging {
    user-select: none;

    & * {
        pointer-events: none;
    }
}

.splitViewPane {
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.splitViewHandle {
    appearance: none;
    position: relative;

    display: block;
    touch-action: none;
    border: 0;
    margin: 0;
    padding: 0;

    background: transparent;
    cursor: col-resize;

    &::before {
        position: absolute;
        top: 0;
        left: calc(50% - 1px);
        height: 100%;
        width: 2px;
        content: '';
        background: var(--surface-stroke);
        transition: background .15s var(--swift-out);
    }

    &:focus-visible::before {
        background: var(--primary-500);
    }

    @include mixin.hover {
        &::before {
            background: var(--primary-500);
        }
    }

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

.splitViewHandleVertical {
    composes: splitViewHandle;

    cursor: row-resize;

    &::before {
        top: calc(50% - 1px);
        left: 0;
        height: 2px;
        width: 100%;
    }
}