/* Banner de alerta climatico */

.banner-alerta {
    --raio: 18px;

    /*
     * Cada modo so precisa redefinir o tom de destaque: a borda, o icone e
     * o titulo se servem dessa mesma variavel, entao a cascata faz o resto.
     */
    --destaque: #f24949;
    --link: #00569c;

    display: block;
    padding: 22px 28px;
    border: 1px solid var(--destaque);
    border-radius: var(--raio);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color var(--delay-default) ease, transform var(--delay-default) ease, box-shadow var(--delay-default) ease;

    /* Modos de severidade, do mais grave ao mais brando */
    &[data-type="alerta"] {
        --destaque: #f24949;
        border: 2px solid var(--destaque);
    }

    &[data-type="atencao"] {
        --destaque: #ff8c1a;
        border: 2px solid var(--destaque);
    }

    &[data-type="observacao"] {
        --destaque: #d19d00;
    }

    &[data-type="normalidade"] {
        --destaque: #28a745;
    }


    &:focus-visible {
        outline: 2px solid var(--destaque);
        outline-offset: 3px;
    }

    .banner-alerta-conteudo {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .icone {
        flex: 0 0 auto;
        font-size: 3.25rem;
        color: var(--destaque);
    }

    .texto {
        min-width: 0;
    }

    .titulo {
        margin: 0;
        color: var(--destaque);
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .descricao {
        margin: 6px 0 0;
        font-size: 1rem;
        line-height: 1.45;
    }

    /* A chamada acompanha o texto, entao vive dentro do parrafo */
    .chamada {
        position: relative;
        color: var(--link);
        white-space: nowrap;

        --reversed-link-gap: min(100%, 1.35em);
        background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
        background-position-x: right;
        transition: background-size .5s cubic-bezier(.3, 1, .3, 1);

        &::after {
            content: ' \2192';
            position: absolute;
            right: 0;
            transform: translateX(calc(100% + 5px));
            transition: transform var(--delay-default);
        }
    }


    &:hover {
        .chamada {
            background-position-x: left;
            background-size: 100% 1px;

            &::after {
                transform: translateX(calc(100% + 10px));
            }
        }
    }


    @media (prefers-color-scheme: dark) {
        --link: #31a2ff;

        /* Modos de severidade, do mais grave ao mais brando */
        &[data-type="alerta"] {
            --destaque: #f24949;
            border: 2px solid var(--destaque);
        }

        &[data-type="atencao"] {
            --destaque: #ff8c1a;
            border: 2px solid var(--destaque);
        }

        &[data-type="observacao"] {
            --destaque: #f2c94c;
        }

        &[data-type="normalidade"] {
            --destaque: #28a745;
        }
    }

    @media (max-width: 600px) {
        padding: 18px 20px;

        .banner-alerta-conteudo {
            gap: 16px;
        }

        .icone {
            font-size: 2.5rem;
        }

        .titulo {
            font-size: 1.125rem;
        }

        .descricao {
            font-size: 0.875rem;
        }

        .chamada {
            white-space: normal;
        }
    }
}