/*
 * Expired login page notice (restruct/silverstripe-login-branding), inserted above the form by
 * client/js/expired-notice.js.
 *
 * Built on the login-forms theme's own custom properties, so it follows that theme's warning
 * colour and its dark mode (darkmode.css redefines --color-message-warning). Every var() has a
 * fallback, so a Security page rendered without the login-forms theme still gets a readable notice.
 * Plain CSS, shipped as-is: comments must stay in this block form.
 */
.login-branding-expired-notice {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    box-sizing: border-box;
    max-width: var(--sizing-content-width, 330px);
    margin: 0 0 var(--spacing-form-controls, 20px);
    padding: .75rem 1rem;
    color: var(--color-message-warning, #856404);
    /* A tint of the text colour, so the background follows light and dark mode with it. The rgba
       line is the fallback for browsers without color-mix(). */
    background-color: rgba(255, 193, 7, .12);
    background-color: color-mix(in srgb, var(--color-message-warning, #856404) 10%, transparent);
    border: 1px solid var(--color-message-warning, #856404);
    border-radius: var(--bs-border-radius, .375rem);
}

.login-branding-expired-notice__icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin-top: .15em;
}

.login-branding-expired-notice__text {
    margin: 0;
}

.login-branding-expired-notice__link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}