@use '~@/style/globals';

.Login {
    &__message {
        padding: 20px;
        background-color: globals.$bg-color-emphasis;
        font-size: 1.2rem;
        text-align: center;

        &--default {
            color: globals.$text-light-color;
        }

        &--error {
            color: globals.$text-danger-color;
        }

        &--success {
            color: globals.$text-success-color;
        }
    }

    &__body {
        padding: 30px 20px;
    }

    &__form {
        $element-vertical-padding: 10px;

        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: space-around;

        &__input {
            width: 200px;
            margin-right: 10px;
            margin-bottom: 1rem;
            padding: $element-vertical-padding 15px;
        }

        &__submit {
            // stylelint-disable-next-line declaration-no-important -- Overwrite the .Button definition.
            padding: $element-vertical-padding 14px !important;
        }

        @media (min-width: 600px) {
            flex-flow: row nowrap;
            justify-content: center;

            &__input {
                margin-bottom: 0;
            }
        }
    }
}
