.ez-login {
    height: 100%;

    .form-group {
        padding-top: calculateRem(16px);
        margin-bottom: 0;
    }

    .ez-field__error {
        @include error-under-label();
    }

    &__form-input {
        &.is-invalid {
            @include input-invalid;
        }
    }

    &__image-col {
        position: relative;
        display: flex;
        flex-direction: column;
        background-image: url('/bundles/ezplatformadminui/img/login-background.jpg');
    }

    &__support-wrapper {
        margin: 65vh 0 0 calculateRem(80px);
        color: $ibexa-white;
    }

    &__support-headline {
        font-weight: 600;
        font-size: calculateRem(24px);
        margin-bottom: calculateRem(24px);
    }

    &__support-content {
        font-size: calculateRem(16px);
    }

    &__actions-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: $ibexa-color-font;
        background: $ibexa-white;
    }

    &__logo {
        position: absolute;
        top: calculateRem(30px);
        right: calculateRem(30px);
        max-width: calculateRem(120px);
    }

    &__actions-wrapper {
        width: calculateRem(450px);
    }

    &__actions-headline {
        margin-bottom: calculateRem(12px);
        color: $ibexa-color-font;
        font-weight: 500;
        font-size: calculateRem(26px);
    }

    &__actions-subheadline {
        margin-bottom: calculateRem(56px);
    }

    &__errors-container {
        display: inline-block;
        margin-bottom: calculateRem(30px);
        color: $ibexa-color-danger;
    }

    &__input-label-wrapper {
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    &__input-label {
        margin-bottom: calculateRem(12px);
    }

    &__input {
        width: 100%;
        height: calculateRem(45px);
        padding: calculateRem(12px);
        background: $ibexa-white;
        margin-bottom: calculateRem(32px);
        position: relative;
    }

    &__password-visibility-toggler {
        position: absolute;
        right: calculateRem(8px);
        top: calculateRem(59px);
        z-index: 1;
        margin-left: auto;
        border: none;
        outline: none;

        &:focus {
            border: none;
            outline: none;
        }
    }

    &__btn {
        &--sign-in,
        &--reset-password,
        &--change-password {
            padding: calculateRem(10px) calculateRem(80px);
        }

        &--cancel {
            padding: calculateRem(10px) calculateRem(24px);
        }

        &--change-password {
            margin-top: calculateRem(32px);
        }
    }

    &__copright {
        position: absolute;
        bottom: calculateRem(15px);
        right: calculateRem(25px);
        height: calculateRem(20px);
        width: calculateRem(200px);
        color: $ibexa-color-base-dark;
        text-align: right;
        font-size: calculateRem(14px);
    }
}
