:root {
    --azul-sv: #1618ff;
    --laranja-boopt: #ff7730;
    --navbar-width: 16rem;
    --burger-header-height: 4rem;
    --fonte:
        "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif,
        system-ui;
    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.15'%3E%3C/rect%3E%3C/svg%3E");
}

html {
    scroll-behavior: smooth !important;
}

.grid.grid-dividers > *:not(:last-child) {
    border-bottom: 1px solid var(--color-base-200);
    padding-bottom: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
}

.input,
.select,
.file-input,
.choices,
.textarea {
    transition: border-color 100ms;

    &:focus,
    &:focus-within,
    &:focus-visible {
        outline: none !important;
        border-color: var(--color-primary);
    }
}

.textarea:disabled,
.select:disabled,
.input:disabled,
.input:has(> input:disabled) {
    border-color: var(--input-color) !important;
}

.modal-box,
.modal-backdrop {
    transition:
        opacity 200ms,
        scale 200ms !important;
}

.modal {
    transition:
        visibility 0.3s allow-discrete,
        background-color 0.3s ease-out,
        opacity 0.1s ease-out;
}

#minha-boopt-cards {
    columns: 2 300px;
    column-gap: 2rem;

    > div {
        display: inline-block;
        width: 100%;
        margin-bottom: 2rem;
    }
}
@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeFromRight {
    from {
        right: -100%;
    }

    to {
        right: 0%;
    }
}

.radio-group {
    display: grid;
    grid-auto-flow: column;
    gap: 0.25rem;
    background: var(--color-base-200);
    padding: 0.3rem;
    border-radius: var(--radius-field);
    height: min-content;

    input[type="radio"] {
        padding: 0.45rem 0.7rem;
        cursor: pointer;
        appearance: none;
        width: 100%;
        text-align: center;
        height: max-content;
        border-radius: var(--radius-field);
        background: transparent;
        transition: background 100ms;

        &::after {
            content: attr(value);
            font-weight: 500;
        }

        &:nth-of-type(1) {
            display: none;
        }

        &:checked {
            box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
            background: var(--color-primary);
            color: var(--color-primary-content);

            &[value="Sim"] {
                background: var(--color-success);
                color: var(--color-success-content);
            }

            &[value="Não"] {
                background: var(--color-error);
                color: var(--color-error-content);
            }
        }
    }
}

.animacao-frase-vem {
    position: relative;
    animation: fraseVem 300ms ease-out backwards;
}

.animacao-frase-vai {
    position: relative;
    animation: fraseVai 300ms ease-in forwards;
}

@keyframes fraseVem {
    from {
        left: 100%;
    }

    to {
        left: 0%;
    }
}

@keyframes fraseVai {
    from {
        left: 0%;
    }

    to {
        left: -100%;
    }
}

/* safari */
.list-row::after {
    border-color: color-mix(
        in oklab,
        var(--color-base-content) 5%,
        transparent
    ) !important;
}

label.input > input[type="date"] {
    line-height: var(--size);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentcolor 50%, transparent);
}

/* edge */
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

/* print */
@media print {
    #navbar {
        display: none;
    }

    #burger-header {
        position: sticky;
        background: #fff !important;
        top: 0;
    }

    #app,
    html,
    body {
        background-color: #fff;
    }
}