.login-fields-container {
    display: flex;
    flex-direction: column;
    gap: var(--field-spacing);
}

.login-options {
    color: var(--color-off-white);
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    .stay-logged-in-wrapper {
        display: flex;
        align-items: center;
        padding: 0;

        .stay-logged-in-checkmark {
            accent-color: var(--gradient-light-tag);
            appearance: none;
            margin: 0 0.5rem 0 0;
            background-clip: content-box;
            border-radius: 0.25rem;
            cursor: pointer;
            display: inline-block;
            height: 1rem;
            position: relative;
            width: 1rem;
            padding: 0;
        }
        .stay-logged-in-label {
            font-size: 0.8rem;
            color: var(--color-off-white);
        }
    }
}

.forgot-password-wrapper {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    .forgot-password {
        text-align: right;
        color: var(--color-off-white);
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.login-actions {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--field-spacing);
    & > * {
        flex: 1 1 50%;
    }
}

.login-divider-container {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin: 1.4rem 0;

    .divider-line {
        background-color: var(--color-off-white);
        flex-grow: 1;
        height: 1px;
    }

    .divider-text {
        color: var(--color-off-white);
        text-align: center;
        white-space: nowrap;
        font-weight: bold;
    }
}