/* Header account link, shipped directly with the upload package. */
.header-login {
    border-color: var(--color-slate-300);
    background-color: #fff;
    color: var(--color-slate-800);
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
    transition: background-color 180ms ease, border-color 180ms ease,
        color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .header-login:hover {
        border-color: var(--color-brand-600);
        background-color: var(--color-brand-600);
        color: #fff;
        box-shadow: 0 5px 14px rgb(227 10 23 / 18%);
        transform: translateY(-1px);
    }
}

.header-login:focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 3px;
}

.header-login:active {
    border-color: var(--color-brand-700);
    background-color: var(--color-brand-700);
    color: #fff;
    box-shadow: 0 1px 3px rgb(227 10 23 / 12%);
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .header-login {
        transition: none;
    }

    .header-login:hover,
    .header-login:active {
        transform: none;
    }
}