.bebb-panel-area {
    position: relative;
    min-width: 0;
}

.bebb-resizable-panels {
    --pb-grid-column-widths: var(--bebb-panel-column-widths);
    row-gap: 1.5rem;
}

/* Slotted toolbar items live outside the panel's shadow stylesheet.
   Flex layout avoids the baseline space of inline controls inside list items. */
.bebb-resizable-panels pb-panel > li[slot="toolbar"] {
    display: flex;
    align-items: center;
    height: var(--bebb-panel-toolbar-height, 32px);
    margin: 0;
    padding: 0;
}

.bebb-panel-resizers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.bebb-panel-resizer {
    position: absolute;
    top: var(--bebb-panel-resizer-top, calc(var(--bebb-panel-toolbar-height, 32px) + 0.5rem));
    bottom: 0;
    display: block;
    width: 0.75rem;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    border-radius: var(--bebb-control-radius, 5px);
    background: transparent;
    box-shadow: none;
    cursor: col-resize;
    touch-action: none;
    pointer-events: auto;
}

.bebb-panel-resizer:is(:hover, :focus-visible, :active) {
    background: transparent;
    box-shadow: none;
}

.bebb-panel-resizer::before {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: var(--bebb-control-radius, 5px);
    background: #f5f5f5;
    content: "";
    transition: width var(--bebb-control-transition), background-color var(--bebb-control-transition);
}

.bebb-panel-resizer:hover::before,
.bebb-panel-resizer:focus-visible::before {
    width: 100%;
    background: var(--bebb-control-hover-background);
}

.bebb-panel-resizer:focus-visible {
    outline: none;
}

@media (max-width: 56.25rem) {
    .bebb-resizable-panels {
        --pb-grid-column-widths: minmax(0, 1fr);
    }

    .bebb-panel-resizers {
        display: none;
    }
}