/*
 * Single source of truth for experiment action buttons.
 *
 * Loaded in three places so every "advance" button looks the same:
 *   1. resources/experiment-elements/style.css imports this file, so the rule
 *      ends up in the LitElement shadow-DOM screens (calibration, fullscreen, ...).
 *   2. resources/views/experiment/show.blade.php links the compiled file for the
 *      legacy main-document trial buttons.
 *   3. The #surveyContainer block below maps SurveyJS navigation buttons onto the
 *      same tokens.
 *
 * To restyle every action button, edit the tokens in :root below.
 */

:root {
    --btn-bg: rgb(29 109 236);
    --btn-bg-hover: rgb(18 90 206);
    --btn-fg: #fff;
    --btn-radius: 0.375rem;
    --btn-font-size: 1.5rem;
    --btn-min-width: 202px;
    --btn-min-height: 56px;
}

/* Fallbacks keep .advance self-sufficient on pages that don't link this file
   (e.g. LitElement screens that resolve tokens via shadow-DOM inheritance). */
.advance {
    min-width: var(--btn-min-width, 202px);
    min-height: var(--btn-min-height, 56px);
    height: var(--button-height); /* per-screen sizing var used by LitElement screens */
    background-color: var(--btn-bg, rgb(29 109 236));
    color: var(--btn-fg, #fff);
    border-radius: var(--btn-radius, 0.375rem);
    font-size: var(--btn-font-size, 1.5rem);
    border: 0;
}

.advance:hover {
    background-color: var(--btn-bg-hover, rgb(18 90 206));
}

/* Narrow viewports: the 202px min-width + 1.5rem font would overflow the
   card on small phones. Let .advance shrink to its content and use less
   horizontal padding so it fits comfortably (bug 14). */
@media (max-width: 640px) {
    .advance {
        min-width: 0;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        font-size: 1.125rem;
    }
}

/* SurveyJS navigation buttons consume the same tokens */
#surveyContainer {
    --sjs-primary-backcolor: var(--btn-bg);
    --sjs-primary-backcolor-dark: var(--btn-bg-hover);
    --sjs-primary-forecolor: var(--btn-fg);
}

#surveyContainer .sd-action-bar .sd-btn,
#surveyContainer .sd-body__navigation .sd-btn {
    font-size: var(--btn-font-size);
    border-radius: var(--btn-radius);
    border: 0;
}