/* The layer order is restated in every SDK stylesheet, because the first declaration the browser sees is
   the one that counts and stylesheet load order varies by page. Consumer CSS stays unlayered and so
   always wins. */
@layer rspond.reset, rspond.vendor, rspond.document, rspond.component, rspond.theme, rspond.look;

@layer rspond.component {
    .rspond-split-panel {
        overflow: hidden;
    }

    /* The pane gutter, as two tokens because the divider reads them too: its line stops short of the
       panel's edges by the same amount. */
    .rspond-split-panel-pane {
        overflow: auto;
        padding: var(--rspond-split-panel-gutter-block, 8px) var(--rspond-split-panel-gutter-inline, 12px);
    }

    .rspond-split-panel-animating > .rspond-split-panel-pane {
        transition: width 0.3s ease, height 0.3s ease, padding 0.3s ease;
    }

    .rspond-split-panel-collapsed > .rspond-split-panel-pane:first-of-type {
        overflow: hidden;
        padding: 0;
    }

    /* @rspond-css-out-of-flow-exemption A containing block for the divider's grab target; no inset.
       The visible line is the clipped background: the padding insets the content box by the pane gutter, the
       clip keeps the paint inside it, and the colour stays faint because the gutter already separates the
       panes. */
    .rspond-split-panel-divider {
        position: relative;
        background: var(--rspond-split-panel-divider-color, color-mix(in srgb, var(--rspond-border-color, #e0e0e0) 30%, transparent));
        background-clip: content-box;
        transition: background 0.15s ease;
    }

    .rspond-split-panel-horizontal > .rspond-split-panel-divider {
        cursor: col-resize;
        padding: var(--rspond-split-panel-gutter-block, 8px) 0;
    }

    .rspond-split-panel-vertical > .rspond-split-panel-divider {
        cursor: row-resize;
        padding: 0 var(--rspond-split-panel-gutter-inline, 12px);
    }

    /* The grab target: wider than the hairline so the divider is draggable without pixel-hunting; never
       painted. */
    .rspond-split-panel-divider::before {
        content: '';
        position: absolute;
        z-index: 1;
    }

    .rspond-split-panel-horizontal > .rspond-split-panel-divider::before {
        top: 0;
        bottom: 0;
        left: -1px;
        right: -1px;
    }

    .rspond-split-panel-vertical > .rspond-split-panel-divider::before {
        left: 0;
        right: 0;
        top: -1px;
        bottom: -1px;
    }

    .rspond-split-panel-divider:hover,
    .rspond-split-panel-dragging > .rspond-split-panel-divider {
        background: var(--rspond-split-panel-divider-active-color, var(--rspond-status-success));
        background-clip: content-box;
    }

    .rspond-split-panel-dragging {
        user-select: none;
    }
}