.login {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &.register {
        --input-theme: var(--algebra-orange);
    }

    h2 {
        color: var(--input-theme);
    }

    form {
        display: flex;
        flex-direction: column;
    }

    label {
        font-weight: 600;
    }

    input {
        &[type=text], &[type=password] {
            width: 350px;
            max-width: 80vw;
        }
    }

    button {
        margin-bottom: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;

        &:disabled svg {
            width: revert;
        }

        svg {
            margin-right: 0.3rem;
            fill: white;
            width: 0;
        }
    }

    a {
        color: var(--algebra-orange);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    &.register a {
        color: var(--algebra-red);
    }

    .message-box {
        text-align: center;
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 0.3rem;
        border: solid;

        &.success {
            background-color: #d1e7dd;
            border-color: #a3cfbb;
            color: #0a3622;
        }

        &.fail {
            background-color: #f8d7da;
            border-color: #f1aeb5ff;
            color: #58151cff;
        }
    }
}