.eSplitter {
    --eSplitterH: 640px;
    --eSplitterBarSize: var(--spacing-lg);
    --eSplitterBarBg: var(--brand-100);
    --eSplitterBarBgHover: var(--brand-300);
    --eSplitterBarBgActive: var(--brand-500);
    --eSplitterBarRadius: var(--radius-full);

    height: var(--eSplitterH);
    width: 100%;

    & .k-splitter {
        border: none;
        background: transparent;
        height: 100%;
        width: 100%;
    }

    & .k-pane {
        overflow: hidden;
    }

    & .k-splitbar {
        background-color: var(--eSplitterBarBg);
        border: none;
        transition: background-color 0.2s ease;

        & .k-icon,
        & .k-svg-icon {
            display: none;
        }

        &:hover,
        &.k-splitbar-draggable-horizontal:hover,
        &.k-splitbar-draggable-vertical:hover {
            background-color: var(--eSplitterBarBgHover);
            cursor: col-resize;
        }

        &:active {
            background-color: var(--eSplitterBarBgActive);
        }
    }

    & .k-splitbar-horizontal {
        width: var(--eSplitterBarSize);
        border-radius: var(--eSplitterBarRadius);
    }

    & .k-splitbar-vertical {
        height: var(--eSplitterBarSize);
        border-radius: var(--eSplitterBarRadius);

        &:hover,
        &.k-splitbar-draggable-vertical:hover {
            cursor: row-resize;
        }
    }
}