.kv-split {
    z-index: 0;

    display: flex;

    height: 100%;

    user-select: text;

    outline: none;

    &.horizontal {
        flex-direction: row;
    }

    &.vertical {
        flex-direction: column;

        width: 100%;
        min-height: 100%;
    }

    .gutter {
        position: relative;

        background: var(--g-color-base-background);

        &::after {
            position: absolute;
            inset: 0;

            content: '';

            background-color: var(--g-color-base-generic-ultralight);
        }

        &.active::after,
        &:hover::after {
            background-color: var(--g-color-line-generic-hover);

            transition: background-color 1s ease;
        }

        &.disabled {
            display: none;
        }

        &.gutter-vertical {
            width: 100%;
            height: 8px;

            cursor: row-resize;

            &::before {
                position: absolute;
                top: 50%;
                left: 50%;

                width: 16px;
                height: 4px;

                content: '';

                border-width: 1px 0;
                border-style: solid;
                border-color: var(--g-color-base-generic-hover);

                transform: translate(-50%, -50%);
            }
        }

        &.gutter-horizontal {
            width: 8px;
            height: 100%;

            cursor: col-resize;

            &::before {
                position: absolute;
                top: 50%;
                left: 50%;

                width: 4px;
                height: 16px;

                content: '';

                border-width: 0 1px;
                border-style: solid;
                border-color: var(--g-color-base-generic-hover);

                transform: translate(-50%, -50%);
            }
        }
    }
}