/* CSS button styles in the file are built for and intended for the single page campaigns.
This File should not be used for any platform purposes
See examples at <home_url>/campaign_design_library#buttons-section */

/* Remove default button styles */
button, a {
    appearance: none;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
    padding: 0;
}

/* Button container with flexible layout */
.base-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 16px 0;
    flex-wrap: wrap;
    align-items: flex-start;
}

.base-btn-container.one-row {
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Vertical stacking variant */
.base-btn-container.stacked {
    flex-direction: column;
    align-items: center;
}

.base-btn-container.small-buttons {
    gap: 8px;
    .base-btn {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 12px;
        flex: 1 1 80px;
    }
}

/* Base button styles */
.base-btn {
    position: relative;
    min-height: 48px;
    padding: 10px;
    font-size: 16px;
    font-weight: normal;
    text-decoration: unset;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: var(--style_prop_colour_inactive_button, #757575);
    color: var(--style_prop_colour_inactive_button_text, #ffffff);
    border-color: var(--style_prop_colour_inactive_button, #757575);
    border-style: solid;
    border-radius: var(--style_prop_button_border_radius, 4px);
}

.base-btn.icon-btn {
    font-size: 32px;
    font-weight: bold;
    width: 40px;
    min-height: 40px;
    padding: 0 2px 0 0;
    flex: 0 0 40px;
    color: var(--style_prop_colour_primary_button_text, #ffffff);
    background: var(--style_prop_colour_primary_button, #262626);
}

.base-btn.icon-btn.outline {
    color: var(--style_prop_colour_primary_button, #262626);
    background: transparent;
    border-color: var(--style_prop_colour_primary_button, #262626);
    border-width: 1px;
}

.base-btn.small {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
}

/* Button sizing in horizontal container */
.base-btn-container .base-btn:not(.icon-btn) {
    flex: 1 1 200px;
}

/* Button sizing in stacked container */
.base-btn-container.stacked .base-btn {
    width: 100%;
    flex: 0;
}

/* Button text element that fills available space */
.base-btn .text {
    flex-grow: 1;
}

/* Disabled button state */
.base-btn:is(:disabled, .disabled, [disabled]) {
    cursor: default;
    opacity: 0.65;
    pointer-events: None;
}

/* Hover effect for enabled buttons */
.base-btn:hover:not(:disabled, .disabled, [disabled]) {
    filter: brightness(90%);
    text-decoration: unset;
    cursor: pointer;
}

/* Primary button variant */
/*TODO: not sure about this secondary active becoming primary */
.base-btn.primary {
    color: var(--style_prop_colour_primary_button_text, #ffffff);
    background: var(--style_prop_colour_primary_button, #262626);
    border-color: var(--style_prop_colour_primary_button_border, 'transparent');
    border-width: calc(var(--style_prop_weight_button_border, 1) * 1px);
}

/* Secondary button variant */
.base-btn.secondary {
    color: var(--style_prop_colour_secondary_button_text, #ffffff);
    background: var(--style_prop_colour_secondary_button, #767676);
    border-color: var(--style_prop_colour_secondary_button_border, 'transparent');
    border-width: calc(var(--style_prop_weight_button_border, 1) * 1px);
}

/* Selected button state */
.base-btn.selected, .base-btn.active {
    background-color: var(--style_prop_colour_selected_button, #262626);
    color: var(--style_prop_colour_selected_button_text, #ffffff);
    border-color: var(--style_prop_colour_selected_button, #262626);
}

/* Correct answer state */
.base-btn.correct {
    background-color: var(--style_prop_colour_correct_button, #008561);
    color: var(--style_prop_colour_correct_button_text, #ffffff)
}

/* Incorrect answer state */
.base-btn.incorrect {
    background-color: var(--style_prop_colour_incorrect_button, #D22124);
    color: var(--style_prop_colour_incorrect_button_text, #ffffff);
    border-color: var(--style_prop_colour_incorrect_button, #D22124);
}



/* Navigation Tab buttons */
.tab-container {
    width: 100%;
    flex-wrap: nowrap;
}

.tab-container .tab-btn.base-btn {
    background-color: transparent;
    color: var(--style_prop_colour_font);
    border-radius: unset;
    border: 0;
    border-bottom: 4px solid;
    flex-grow: 1;
    padding: 4px;
    margin-top: auto;
}

.tab-container .tab-btn.base-btn.active {
    border-bottom: 4px solid  var(--style_prop_colour_primary_button, #262626);

}