/*
 * Ustaliy Snax G1 fallback.
 * Replaces the small part of Bimber/G1 all-light.css used by Snax quiz pages.
 * Loaded only on single snax_quiz pages by Ustaliy Snax Cleanup.
 */

body.single-snax_quiz {
    --g1-rtxt-color: #333;
    --g1-itxt-color: #000;
    --g1-mtxt-color: #777;
    --g1-border-color: #e6e6e6;
    --g1-bg-color: #fff;
    --g1-bg-tone-color: #f2f2f2;
    --g1-bg-alt-color: #ededed;
    --ust-snax-accent: var(--ast-global-color-0, #111);
    --ust-snax-accent-text: #fff;
}

/* Start/restart quiz buttons. Snax templates use plain <button>, so avoid global button rules. */
body.single-snax_quiz .snax-quiz-button,
body.single-snax_quiz .snax-quiz-actions button,
body.single-snax_quiz .quiz .snax-quiz-button {
    box-sizing: border-box;
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 12px 28px;
    border: 2px solid var(--ust-snax-accent);
    border-radius: 999px;
    background-color: var(--ust-snax-accent);
    color: var(--ust-snax-accent-text);
    font-family: "Work Sans", Roboto, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 175ms ease-in-out, background-color 175ms ease-in-out, color 175ms ease-in-out, box-shadow 175ms ease-in-out;
}

body.single-snax_quiz .snax-quiz-button-start-quiz,
body.single-snax_quiz .snax-quiz-button-restart-quiz {
    display: block;
    width: 100%;
}

body.single-snax_quiz .snax-quiz-button:hover,
body.single-snax_quiz .snax-quiz-actions button:hover {
    filter: brightness(0.96);
    color: var(--ust-snax-accent-text);
    box-shadow: 0 3px 8px -3px rgba(0,0,0,.35);
}

body.single-snax_quiz .snax-quiz-button:active,
body.single-snax_quiz .snax-quiz-actions button:active {
    box-shadow: inset 0 3px 8px -4px rgba(0,0,0,.45);
}

body.single-snax_quiz .snax-quiz-button:focus-visible,
body.single-snax_quiz .snax-quiz-actions button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Generic G1 button classes that can appear in older Snax/Bimber markup. */
body.single-snax_quiz .g1-button {
    box-sizing: border-box;
    display: inline-block;
    margin-right: .2px;
    position: relative;
    z-index: 0;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    font: 700 15px/22px "Work Sans", Roboto, Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 99px;
    transition: border-color 175ms ease-in-out, background-color 175ms ease-in-out, color 175ms ease-in-out, padding 175ms ease-in-out, box-shadow 175ms ease-in-out;
}

body.single-snax_quiz .g1-button:hover {
    box-shadow: 0 3px 6px -3px rgba(0,0,0,.333);
}

body.single-snax_quiz .g1-button:active {
    box-shadow: inset 0 3px 6px -3px rgba(0,0,0,.333);
}

body.single-snax_quiz .g1-button-m { padding: 5px 18px; border-width: 2px; }
body.single-snax_quiz .g1-button-s { padding: 5px 14px; border-width: 1px; font-size: 13px; line-height: 18px; }
body.single-snax_quiz .g1-button-l { padding: 10px 28px; border-width: 2px; font-size: 17px; line-height: 18px; }
body.single-snax_quiz .g1-button-xl { padding: 10px 32px; border-width: 3px; font-size: 19px; line-height: 22px; }
body.single-snax_quiz .g1-button-wide { display: block; width: 100%; }

/* Next question arrow. This is the key rule for <a class="snax-quiz-pagination-next g1-arrow ...">. */
body.single-snax_quiz .g1-arrow,
body.single-snax_quiz .snax-quiz-pagination-next.g1-arrow {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    height: auto;
    margin-left: auto;
    margin-right: 25px;
    padding: 14px 20px;
    position: relative;
    border: 0 solid var(--g1-border-color);
    border-radius: 6px 9px 9px 6px;
    background-color: var(--g1-border-color);
    color: var(--g1-itxt-color);
    font-family: "Work Sans", Roboto, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
}

body.single-snax_quiz .g1-arrow:before,
body.single-snax_quiz .snax-quiz-pagination-next.g1-arrow:before {
    display: block;
    width: 0;
    height: 2px;
    margin-left: -1px;
    margin-right: 0;
    border-width: 25px 20px;
    position: absolute;
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-color: inherit;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    content: "";
}

body.single-snax_quiz a.g1-arrow:hover,
body.single-snax_quiz .snax-quiz-pagination-next.g1-arrow:hover {
    color: var(--g1-itxt-color);
    box-shadow: 0 3px 6px -3px rgba(0,0,0,.333);
}

body.single-snax_quiz .g1-arrow-disabled {
    pointer-events: none;
    opacity: .5;
}

body.single-snax_quiz .g1-arrow-left {
    margin-left: 25px;
    margin-right: auto;
}

body.single-snax_quiz .g1-arrow-left:before {
    left: auto;
    right: 100%;
    margin-right: -1px;
    margin-left: 0;
    border-color: inherit;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* Small pieces from G1 used by Snax result/message wrappers. */
body.single-snax_quiz .g1-message {
    box-sizing: border-box;
    clear: both;
    border: 1px solid var(--g1-border-color);
    margin-bottom: 1.5rem;
    position: relative;
    font-size: 14px;
    line-height: 20px;
}

body.single-snax_quiz .g1-card {
    margin-bottom: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,.07);
    background-color: var(--g1-bg-color);
}

@media only screen and (min-width: 1025px) {
    body.single-snax_quiz .g1-indent {
        padding-left: 120px;
    }
    body.single-snax_quiz .g1-indent .snax-items,
    body.single-snax_quiz .g1-indent .snax-message,
    body.single-snax_quiz .g1-indent blockquote {
        margin-left: -120px;
    }
}

@media only screen and (max-width: 600px) {
    body.single-snax_quiz .g1-arrow,
    body.single-snax_quiz .snax-quiz-pagination-next.g1-arrow {
        width: calc(100% - 25px);
        min-height: 52px;
        font-size: 17px;
    }
}