/* ==========================================================
   ADMIN / UTILITY TOOLBAR
   ========================================================== */

.tb-adminToolbar {
    width: 100%;
    background: transparent;
}

.tb-adminToolbar *,
.tb-adminToolbar *::before,
.tb-adminToolbar *::after {
    box-sizing: border-box;
}


/* ==========================================================
   INNER ROW
   ========================================================== */

.tb-adminToolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: min(118rem, calc(100% - 8rem));

    margin: 0 auto;
    padding: 0.8rem 0;

    gap: 3rem;
}


/* ==========================================================
   LEFT — BG / THEME / READER
   ========================================================== */

.tb-adminToolbar__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 1.8rem;

    flex: 0 0 auto;
}

.tb-adminToolbar__bgHost,
.tb-adminToolbar__themeHost {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: auto;
    min-width: 0;
}


/* ==========================================================
   READER VERSION SWITCH
   ========================================================== */

.tb-adminToolbar__readerSwitch[hidden] {
    display: none !important;
}

.tb-adminToolbar__readerSwitch {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.75rem;

    margin: 0;
    padding: 0;
}

.tb-adminToolbar__readerSwitchLabel {
    margin: 0;

    color: #777;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}

.tb-adminToolbar__readerSwitchButtons {
    display: inline-flex;
    align-items: center;

    height: 3rem;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid #b9bec3;
    border-radius: 0.55rem;

    background: #ffffff;
}

.tb-adminToolbar__readerSwitchButton {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.25rem;
    min-width: 3.25rem;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: transparent;

    color: #555;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
            color 120ms ease,
            background-color 120ms ease;
}

.tb-adminToolbar__readerSwitchButton +
.tb-adminToolbar__readerSwitchButton {
    border-left: 1px solid #d0d3d6;
}

.tb-adminToolbar__readerSwitchButton:hover:not(.is-active) {
    background: #eceeef;
    color: #222;
}

.tb-adminToolbar__readerSwitchButton.is-active,
.tb-adminToolbar__readerSwitchButton[aria-pressed="true"] {
    background: #35383a;
    color: #ffffff;
}

.tb-adminToolbar__readerSwitchButton:focus-visible {
    position: relative;
    z-index: 1;

    outline: 2px solid #555;
    outline-offset: -3px;
}


/* ==========================================================
   TEMPORARY READER 2 WIDTH CONTROL
   ========================================================== */

.tb-adminToolbar__readerWidth[hidden] {
    display: none !important;
}

.tb-adminToolbar__readerTitleFont[hidden] {
    display: none !important;
}

.tb-adminToolbar__readerTitleSize[hidden] {
    display: none !important;
}

.tb-adminToolbar__readerWidth {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.75rem;

    margin: 0;
    padding: 0;
}

.tb-adminToolbar__readerTitleFont {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.75rem;

    margin: 0;
    padding: 0;
}

.tb-adminToolbar__readerTitleSize {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.5rem;

    margin: 0;
    padding: 0;
}

.tb-adminToolbar__readerWidthLabel,
.tb-adminToolbar__readerTitleFontLabel,
.tb-adminToolbar__readerTitleSizeLabel {
    margin: 0;

    color: #777;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    white-space: nowrap;
}

.tb-adminToolbar__readerTitleFontSelect {
    appearance: none;
    -webkit-appearance: none;

    min-width: 12.8rem;

    margin: 0;
    padding: 0.35rem 2rem 0.35rem 0.65rem;

    border: 1px solid #b7bbbe;
    border-radius: 0.35rem;

    color: #444;
    background:
            linear-gradient(
                    45deg,
                    transparent 50%,
                    #777 50%
            )
            calc(100% - 1.1rem)
            50% / 0.45rem 0.45rem
            no-repeat,
            linear-gradient(
                    135deg,
                    #777 50%,
                    transparent 50%
            )
            calc(100% - 0.8rem)
            50% / 0.45rem 0.45rem
            no-repeat,
            #ffffff;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.1;

    cursor: pointer;
}

.tb-adminToolbar__readerTitleFontSelect:focus-visible {
    outline: 2px solid #777;
    outline-offset: 0.3rem;
}

.tb-adminToolbar__readerTitleSizeButton {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.7rem;
    height: 2.2rem;

    margin: 0;
    padding: 0 0.55rem;

    border: 1px solid #b7bbbe;
    border-radius: 0.35rem;

    color: #444;
    background: #ffffff;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}

.tb-adminToolbar__readerTitleSizeButton:hover {
    border-color: #8f9498;
}

.tb-adminToolbar__readerTitleSizeButton:focus-visible {
    outline: 2px solid #777;
    outline-offset: 0.3rem;
}

.tb-adminToolbar__readerTitleSizeValue {
    min-width: 4.4rem;

    color: #555;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;

    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tb-adminToolbar__readerWidthSlider {
    appearance: none;
    -webkit-appearance: none;

    width: 12rem;
    height: 2rem;

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    cursor: pointer;
}


/* WebKit / Chromium track */

.tb-adminToolbar__readerWidthSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.4rem;

    border-radius: 999px;

    background: #c7cbce;
}


/* WebKit / Chromium thumb */

.tb-adminToolbar__readerWidthSlider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 1.5rem;
    height: 1.5rem;

    margin-top: -0.55rem;

    border: 1px solid #777;
    border-radius: 50%;

    background: #ffffff;

    cursor: ew-resize;
}


/* Firefox track */

.tb-adminToolbar__readerWidthSlider::-moz-range-track {
    width: 100%;
    height: 0.4rem;

    border: 0;
    border-radius: 999px;

    background: #c7cbce;
}


/* Firefox thumb */

.tb-adminToolbar__readerWidthSlider::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;

    border: 1px solid #777;
    border-radius: 50%;

    background: #ffffff;

    cursor: ew-resize;
}

.tb-adminToolbar__readerWidthSlider:focus-visible {
    outline: 2px solid #777;
    outline-offset: 0.3rem;
    border-radius: 0.3rem;
}

.tb-adminToolbar__readerWidthValue {
    min-width: 3.2rem;

    margin: 0;

    color: #555;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;

    font-variant-numeric: tabular-nums;

    text-align: right;

    white-space: nowrap;
}


/* ==========================================================
   RIGHT — MEMBER LEVEL
   ========================================================== */

.tb-adminToolbar__memberLevel {
    flex: 0 0 auto;
    margin-left: auto;

    color: #555;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;

    white-space: nowrap;
}


/* ==========================================================
   BG PICKER
   ========================================================== */

.tb-adminToolbar .tb-site-bg-picker {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.7rem;

    margin: 0;
}

.tb-adminToolbar .tb-site-bg-picker__label {
    margin: 0;

    color: #777;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.tb-adminToolbar .tb-site-bg-picker__select {
    min-width: 11rem;
    height: 3rem;

    margin: 0;
}


/* ==========================================================
   THEME PICKER
   ========================================================== */

.tb-adminToolbar .tb-theme-picker {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 0.7rem;

    margin: 0;
}

.tb-adminToolbar .tb-theme-picker__label {
    margin: 0;

    color: #777;

    font-family:
            Arial,
            Helvetica,
            sans-serif;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.tb-adminToolbar .tb-theme-picker__select {
    min-width: 11rem;
    height: 3rem;

    margin: 0;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 900px) {

    .tb-adminToolbar__inner {
        width: min(100% - 5rem, 118rem);
    }

}


@media (max-width: 700px) {

    .tb-adminToolbar__inner {
        width: calc(100% - 3rem);

        flex-wrap: wrap;

        gap: 1rem 2rem;
    }

    .tb-adminToolbar__left {
        flex-wrap: wrap;

        gap: 1rem;
    }

    .tb-adminToolbar__readerWidthSlider {
        width: 10rem;
    }

    .tb-adminToolbar__memberLevel {
        margin-left: auto;

        font-size: 1.2rem;
    }

}