/*
|--------------------------------------------------------------------------
| Matec Component: Auth Form
|--------------------------------------------------------------------------
*/

.mtc-auth-form {
    display: grid;
    gap: var(--mtc-space-md);
}

.mtc-auth-form__panel {
    display: none;
}

.mtc-auth-form__panel.is-active {
    display: grid;
    gap: var(--mtc-space-md);
}

.mtc-auth-form__intro {
    display: grid;
    gap: var(--mtc-space-xs);
}

.mtc-auth-form__title {
    margin: 0;

    color: var(--mtc-color-heading);

    font-family: var(--mtc-font-family-heading);
    font-size: var(--mtc-font-size-xl);
    font-weight: var(--mtc-font-weight-bold);
    line-height: var(--mtc-line-height-tight);
}

.mtc-auth-form__text {
    margin: 0;

    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-base);
}

.mtc-auth-form__notice {
    padding: var(--mtc-space-sm) var(--mtc-space-md);

    border-radius: var(--mtc-radius-md);

    background: var(--mtc-color-info-soft);
    color: var(--mtc-color-text);

    font-size: var(--mtc-font-size-sm);
    line-height: var(--mtc-line-height-snug);
}

.mtc-auth-form__notice--success {
    background: var(--mtc-color-success-soft);
    color: var(--mtc-color-success);
}

.mtc-auth-form__notice--danger {
    background: var(--mtc-color-danger-soft);
    color: var(--mtc-color-danger);
}

.mtc-auth-form__notice--info {
    background: var(--mtc-color-info-soft);
    color: var(--mtc-color-info);
}

.mtc-auth-form__form {
    gap: var(--mtc-space-sm);
}

.mtc-auth-form__remember {
    margin-block: var(--mtc-space-2xs);
}

.mtc-auth-form__actions {
    padding-top: var(--mtc-space-xs);
}

.mtc-auth-form__link {
    justify-self: center;

    color: var(--mtc-color-link);

    font-size: var(--mtc-font-size-sm);
    font-weight: var(--mtc-font-weight-semibold);
    text-decoration: none;
}

.mtc-auth-form__link:hover {
    color: var(--mtc-color-link-hover);
    text-decoration: underline;
}

.mtc-auth-form__switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--mtc-space-xs);

    padding-top: var(--mtc-space-sm);

    border-top: 1px solid var(--mtc-color-border-subtle);

    color: var(--mtc-color-text-soft);

    font-size: var(--mtc-font-size-sm);
}

/*
|--------------------------------------------------------------------------
| Auth Form - Button/layout hardening
|--------------------------------------------------------------------------
*/

.mtc-auth-form .mtc-form__actions,
.mtc-auth-form__actions {
    display: grid;
    width: 100%;
    gap: var(--mtc-space-sm);
    padding-top: var(--mtc-space-xs);
}

.mtc-auth-form .mtc-button,
.mtc-auth-form .mtc-btn {
    width: 100%;
    justify-self: stretch;
    border-radius: var(--mtc-radius-pill);
}

.mtc-auth-form__submit,
.mtc-auth-form button[type="submit"] {
    width: 100%;
    min-height: var(--mtc-size-button-height);
    border-radius: var(--mtc-radius-pill);
}

.mtc-auth-form__switch {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--mtc-space-sm);

    padding-top: var(--mtc-space-md);
    border-top: 1px solid var(--mtc-color-border-subtle);
}

.mtc-auth-form__switch .mtc-button,
.mtc-auth-form__switch .mtc-btn,
.mtc-auth-form__switch button {
    width: 100%;
    min-height: var(--mtc-size-button-height);
    border-radius: var(--mtc-radius-pill);
}

.mtc-auth-form__switch span {
    color: var(--mtc-color-text-soft);
    font-size: var(--mtc-font-size-sm);
}