/* ======================================================

    inTakt
    Porque ensinar música merece mais.

    Arquivo:
    components.css

    Responsabilidade:
    Estilos de componentes reutilizáveis do site.

====================================================== */


/* ======================================================
   BOTÕES
====================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition);
}

.button--primary {
    background: var(--color-primary);
    color: #fff;
}

.button--primary:hover {
    background: var(--color-action-hover);
}

.button--primary:focus-visible {
    outline: 3px solid rgba(21, 137, 99, 0.22);
    outline-offset: 3px;
}
.button--large {
    min-height: 54px;
    padding-inline: 28px;

    font-size: 1rem;
}
.button--secondary {
    border-color: var(--color-border);
    background: #fff;
    color: var(--color-title);
}

.button--secondary:hover {
    border-color: rgba(3, 70, 83, .22);
    background: var(--color-surface);
    color: var(--color-primary);
}

.button--light {
    background: #fff;
    color: var(--color-secondary);
}

.button--light:hover {
    background: rgba(255,255,255,.9);
}

.button--ghost-light {
    border-color: rgba(255,255,255,.32);
    background: transparent;
    color: #fff;
}

.button--ghost-light:hover {
    border-color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.08);
}