.epos-resizer {
    --epos-resizer-track: 9px;
    --epos-resizer-line: var(--mud-palette-lines-default);
    --epos-resizer-grip: #3B4B53;
    --epos-resizer-grip-thickness: 3px;
    --epos-resizer-grip-length: 40px;

    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    outline: none;
    touch-action: none;
    background-color: transparent;
    background-image: linear-gradient(var(--epos-resizer-line), var(--epos-resizer-line));
    background-repeat: no-repeat;
    background-position: center;
}

/* Centred by layout, not by transform: transformed boxes snap to whole device
   pixels independently of the track and drift off the line at fractional offsets. */
.epos-resizer::after {
    content: '';
    flex: none;
    border-radius: 999px;
    background-color: var(--epos-resizer-grip);
}

.epos-resizer:hover,
.epos-resizer:focus-visible,
.epos-resizer.is-resizing {
    --epos-resizer-grip: var(--mud-palette-primary);
    --epos-resizer-grip-thickness: 4px;
    --epos-resizer-grip-length: 100%;
}

.epos-resizer--vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--epos-resizer-track);
    cursor: col-resize;
    background-size: 1px 100%;
}

.epos-resizer--edge-left {
    left: calc((var(--epos-resizer-track) + 1px) / -2);
}

.epos-resizer--edge-right {
    right: calc((var(--epos-resizer-track) + 1px) / -2);
}

.epos-resizer--vertical::after {
    width: var(--epos-resizer-grip-thickness);
    height: var(--epos-resizer-grip-length);
}

/* The horizontal track is 1px so the seam matches the side panels; the grab
   area comes from ::before, which costs no layout space. */
.epos-resizer--horizontal {
    position: relative;
    width: 100%;
    height: 1px;
    min-height: 1px !important;
    cursor: row-resize;
    background-size: 100% 1px;
}

.epos-resizer--horizontal::after {
    height: var(--epos-resizer-grip-thickness);
    width: var(--epos-resizer-grip-length);
}

.epos-resizer--horizontal::before {
    content: '';
    position: absolute;
    top: calc((var(--epos-resizer-track) - 1px) / -2);
    bottom: calc((var(--epos-resizer-track) - 1px) / -2);
    left: 0;
    right: 0;
}

/* MudBlazor.min.css is linked after app.css, so its own divider rules need
   out-specifying rather than merely overriding. */
.mud-split-panel .divider.epos-resizer--horizontal {
    cursor: row-resize;
}

.mud-split-panel .divider.epos-resizer--horizontal::before {
    top: calc((var(--epos-resizer-track) - 1px) / -2);
    bottom: calc((var(--epos-resizer-track) - 1px) / -2);
    left: 0;
    right: 0;
}

.mud-split-panel .divider.epos-resizer:focus {
    outline: none;
}