/*
// This file is originally a part of https://github.com/qwiglydee/otree-advanced-demos
// SPDX-FileCopyrightText: © 2024 Maxim Vasilyev <qwiglydee@gmail.com>
// SPDX-License-Identifier: MIT
*/

/**
 * Some general style and layout enhancements
 */

:root {
    --ot-fade-out-time: 150ms;
    --ot-fade-in-time: 150ms;
}


/**
 * Makes hidden sections to hold space and prevent content from collapsing and re-aligning
 *
 * @example
 * <section id="foo" class="hole-space">...</section>
 *
 * ot.hideDisplay("foo"); // makes it blank space
 */
.hold-space[hidden] {
    display: initial !important;
    opacity: 0;
}

/**
 * Makes elements to hide out and show up smoothly.
 *
 * NB: if the element is flexible/aligning (like fullscreen main) it also needs class `d-flex` to work properly
 *
 * To avoid initial appearence animation, put `hidden` in original html
 *
 * @example
 * <main id="main" class="ot-fade d-flex" hidden>
 *   <section id="foo" class="ot-fade"> ... </section>
 * </main>
 *
 * ot.showDisplay("main");
 * ot.showDisplay("foo");
 */
.ot-fade {
    opacity: 1;
    transition: opacity var(--ot-fade-in-time) ease-in;
}

.ot-fade[hidden] {
    display: initial !important;
    opacity: 0;
    transition: opacity var(--ot-fade-out-time) ease-out;
 }

.ot-fade.d-flex[hidden] {
    display: flex !important;
}

/**
 * Makes all nested sections/divs appear on top of each other for in-place switching.
 *
 * @example
 * <ot-stacked>
 *   <section id="question-1">...</section>
 *   <section id="question-2">...</section>
 *   <section id="question-2">...</section>
 * </ot-stacked>
 *
 * ot.hideDisplays("question-*");
 * ot.showDisplay("question-2");
 */
ot-stacked {
    display: grid;
    grid-template: "content";
}

ot-stacked > * {
    grid-area: content;
    z-index: 0;
}

ot-stacked > *[hidden] {
    grid-area: content;
    z-index: -1;
}


/** make numbers input small and right aligned */
input[type="number"] {
    max-width: 10em;
    text-align: right;
}

/**
 * Enhancing highlight of input-group
 */
.input-group {
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-radius: 0.25rem;
}
.input-group input {
    border-color: #ced4da !important;
    box-shadow: none !important;
}
.input-group:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.input-group:has(.is-invalid) {
    border: 1px solid #dc3545;
}
.input-group:has(.is-invalid):focus-within {
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.input-group:has(.is-valid) {
    border-color: #198754;
}
.input-group:has(.is-valid):focus-within {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/**
 * Enhancing visibility of disabled selected inputs (apparently, with feedback color)
 */
 .form-check-input.selected:disabled,
 .form-check-input.selected:disabled~.form-check-label
 {
    opacity: 0.75;
 }