/*********************************************************
 *      Toolbars
 *********************************************************/
.yui-horizontal-toolbar {
    z-index: inherit;
    width: 100%;
    height: auto;
    position: relative;
    /*  The toolbar is often a flex item sharing its row with a pinned
     *  control (a back link, a title). A flex item's `min-width:auto`
     *  resolves to the CONTENT minimum, and the sections inside are
     *  `flex-shrink:0; white-space:nowrap` — so the toolbar refuses to
     *  shrink, the row overflows, and the scroll container never sees an
     *  overflow of its OWN: both arrows stay hidden while the items are
     *  clipped by an ancestor. Alone on its row nothing shrinks and the
     *  bug hides, which is why it only shows up once integrated. */
    min-width: 0;
}

.yui-horizontal-toolbar-container {
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    margin: 0 1.2em; /* Reserve space for buttons */
    white-space: nowrap;
    user-select: none;
}

.yui-horizontal-toolbar-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.yui-horizontal-toolbar-scroll-btn {
    cursor: pointer;
    user-select: none;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yui-horizontal-toolbar-scroll-btn.left {
    left: 0;
}
.yui-horizontal-toolbar-scroll-btn.right {
    right: 0;
}
.yui-horizontal-toolbar-scroll-btn span {
    width: 1.2em;
}

/*  Moved from c_yui_main.css (2.6.1): horizontal toolbar section.
 *  Self-contained here so every consumer gets it without the
 *  legacy stack's stylesheet. */

/*********************************************************
 *      Toolbars
 *********************************************************/
.yui-horizontal-toolbar-section {
    display: flex;
    height: auto;
    flex-shrink: 0; /* Prevents resizing */
    white-space: nowrap;
    margin: 0 2px; /* Space between sections */
    justify-content: space-between;
    align-items: center;
}

a.flex-horizontal-section { /* To make flex any <a> */
    display: flex;
    flex-shrink: 0; /* Prevents resizing */
    white-space: nowrap;
    margin: 0 2px; /* Space between sections */
    justify-content: space-between;
    align-items: center;
    padding-inline-end: 2rem;
}


/*********************************************************
 *      A toggle that is ON looks PRESSED
 *
 *  A neutral inverted pill, no hue: the toolbar palette names KINDS of
 *  ACTION (create, pending changes, undo/redo, destructive), and a
 *  toggle is not an action -- it is a state the control is IN. Without
 *  a hue it also survives colour blindness and greyscale.
 *
 *  NOT Bulma's `.button.is-active`, which shares its declaration with
 *  `.button:active` (the look of a finger down right now) and only
 *  shifts the background 10 points of lightness -- 1.27:1 in light,
 *  1.33:1 in dark, against 9.44:1 / 8.46:1 for this one. A hovered
 *  button (5 points) lands halfway to it.
 *
 *  The `:hover` half is not decoration: without it, hovering a pressed
 *  button hands it back to Bulma's `.button:hover` and the toggle
 *  appears to switch off under the pointer.
 *********************************************************/
.button.pressed_state,
.button.pressed_state:hover {
    background-color: var(--bulma-text, #2e333d);
    color: var(--bulma-background, #ffffff);
    border-color: var(--bulma-text, #2e333d);
}

/*********************************************************
 *      The CHOSEN segment of a selector is FILLED
 *
 *  Two different controls, two different marks, and telling them apart
 *  is the whole point:
 *
 *    - a TOGGLE is on or off, and looks PRESSED (above) -- a neutral
 *      pill, no hue, because there is no "which one" to answer;
 *    - a SELECTOR picks ONE of N, and the chosen segment is FILLED with
 *      the link colour. A hue is what the eye finds in a row of
 *      identical grey buttons: measured against the button's own ground
 *      the fill is 5.14:1 in light and 3.53:1 in dark -- less luminance
 *      than the pressed pill (9.44 / 8.46) and a different HUE, which
 *      is what says "this one, of these".
 *
 *  The raw `--bulma-link` and not `-on-scheme`: this is a FILL. The
 *  `-on-scheme` variants exist for a brand colour used as INK -- they
 *  darken it on a light scheme so text can sit on the page -- and a
 *  darkened fill under `link-invert` text is a button nobody asked for.
 *  Ink takes `-on-scheme`; a background takes the raw token and pairs
 *  it with `-invert`.
 *
 *  `:hover` for the same reason as the pressed rule: without it, Bulma's
 *  `.button:hover` takes the fill back and the chosen segment appears to
 *  come unchosen under the pointer.
 *********************************************************/
.button.selected_state,
.button.selected_state:hover {
    background-color: var(--bulma-link, #3273dc);
    border-color: var(--bulma-link, #3273dc);
    color: var(--bulma-link-invert, #fff);
}