.split-panel {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;

    & > .inner-container {
        overflow: hidden;

        & > * {
            width: 100%;
            height: 100%;
        }
    }

    & > .inner-resizer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-basis: 1em;
        flex-shrink: 0;
        cursor: col-resize;
        box-shadow: inset 1px 0 var(--P-resizer-rim), inset -1px 0 var(--P-resizer-rim);

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            transform: scaleX(0);
            background: var(--P-separator);
            transition: transform 0.1s cubic-bezier(0.5, 0, 0.7, 0.5);
        }
        @media (hover: hover) {
            &:hover::before {
                transform: scaleX(0.5);
                transition: transform 0.3s cubic-bezier(0.5, 2, 0.5, 1);
            }
        }
        @media (hover: none) {
            &:active::before {
                transform: scaleX(0.5);
                transition: transform 0.3s cubic-bezier(0.5, 2, 0.5, 1);
            }
        }

        & > .inner-affordance {
            position: relative;
            width: 1em;
            height: 1em;
            --line-pos: 30%;
            --line-weight: 2px;

            &::before,
            &::after {
                position: absolute;
                content: '';
                background: currentColor;
            }
        }
    }

    &.is-horizontal > .inner-resizer > .inner-affordance {
        &::before,
        &::after {
            height: 1em;
            width: var(--line-weight);
            top: 0;
        }
        &::before {
            left: var(--line-pos);
        }
        &::after {
            right: var(--line-pos);
        }
    }
    &.is-vertical > .inner-resizer > .inner-affordance {
        &::before,
        &::after {
            width: 1em;
            height: var(--line-weight);
            left: 0;
        }
        &::before {
            top: var(--line-pos);
        }
        &::after {
            bottom: var(--line-pos);
        }
    }

    &.is-vertical {
        flex-direction: column;

        & > .inner-resizer {
            cursor: row-resize;
            box-shadow: inset 0 1px var(--P-resizer-rim), inset 0 -1px var(--P-resizer-rim);

            &::before {
                transform: scaleY(0);
            }
            &:hover::before {
                transform: scaleY(0.5);
            }
        }
    }
}
