/* ==========================================================
   BG
   TomBeaverBooks independent site background system

   User-facing names:
   Snow
   Mist
   Fog
   Parchment
   Sand
   Sage
   Slate
   Storm
   Charcoal
   Midnight

   Internal names:
   bg-snow
   bg-mist
   bg-fog
   bg-parchment
   bg-sand
   bg-sage
   bg-slate
   bg-storm
   bg-charcoal
   bg-midnight
   ========================================================== */


/* ==========================================================
   BACKGROUND COLORS
   ========================================================== */

:root {
    --tb-bg-snow: #ffffff;
    --tb-bg-mist: #f3f5f6;
    --tb-bg-fog: #e4e7e8;
    --tb-bg-parchment: #f3ead7;
    --tb-bg-sand: #ddcfb5;
    --tb-bg-sage: #d7dfd2;
    --tb-bg-slate: #aeb8be;
    --tb-bg-storm: #89949b;
    --tb-bg-charcoal: #626a70;
    --tb-bg-midnight: #3e474f;
}


/* ==========================================================
   BACKGROUND SELECTIONS
   ========================================================== */

html[data-tb-site-bg="bg-snow"] {
    --tb-bg: var(--tb-bg-snow);
}

html[data-tb-site-bg="bg-mist"] {
    --tb-bg: var(--tb-bg-mist);
}

html[data-tb-site-bg="bg-fog"] {
    --tb-bg: var(--tb-bg-fog);
}

html[data-tb-site-bg="bg-parchment"] {
    --tb-bg: var(--tb-bg-parchment);
}

html[data-tb-site-bg="bg-sand"] {
    --tb-bg: var(--tb-bg-sand);
}

html[data-tb-site-bg="bg-sage"] {
    --tb-bg: var(--tb-bg-sage);
}

html[data-tb-site-bg="bg-slate"] {
    --tb-bg: var(--tb-bg-slate);
}

html[data-tb-site-bg="bg-storm"] {
    --tb-bg: var(--tb-bg-storm);
}

html[data-tb-site-bg="bg-charcoal"] {
    --tb-bg: var(--tb-bg-charcoal);
}

html[data-tb-site-bg="bg-midnight"] {
    --tb-bg: var(--tb-bg-midnight);
}


/* ==========================================================
   ADMIN TOOLBAR CONTROL GROUP

   Keeps BG and Theme beside one another while remaining
   independent systems.
   ========================================================== */

.tb-adminToolbar__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    gap: 1.2rem;

    min-width: 0;
}


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

.tb-adminToolbar__bgHost {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    min-width: 0;
}


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

.tb-site-bg-picker {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    margin: 0;

    color: #777;

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

    font-size: 1.05rem;
    line-height: 1;
}


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

.tb-site-bg-picker__label {
    display: block;

    margin: 0;

    color: #777;

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

    letter-spacing: 0.06em;
    text-transform: uppercase;
}


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

.tb-site-bg-picker__select {
    appearance: none;
    -webkit-appearance: none;

    min-width: 11rem;
    height: 3rem;

    margin: 0;

    padding:
            0
            2.8rem
            0
            1rem;

    border:
            1px solid
            #cfd4d9;

    border-radius: 0.6rem;

    outline: 0;

    background:
            linear-gradient(
                    45deg,
                    transparent 50%,
                    #777 50%
            )
            calc(100% - 1.3rem)
            1.25rem
        / 0.45rem 0.45rem
            no-repeat,

            linear-gradient(
                    135deg,
                    #777 50%,
                    transparent 50%
            )
            calc(100% - 1rem)
            1.25rem
        / 0.45rem 0.45rem
            no-repeat,

            var(--tb-bg, #fff);

    color: #444;

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

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

    cursor: pointer;
}


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

.tb-site-bg-picker__select:hover {
    border-color:
            var(--tb-accent-dark);
}

.tb-site-bg-picker__select:focus {
    border-color:
            var(--tb-accent-dark);
}


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

@media (max-width: 600px) {

    .tb-adminToolbar__controls {
        gap: 0.8rem;
    }

    .tb-site-bg-picker {
        gap: 0.45rem;
    }

    .tb-site-bg-picker__select {
        min-width: 9rem;
    }
}