@use '../../styles/mixins.scss';

.authentication {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;

    background-color: rgba(184, 212, 253, 0.1);
    background-image:
        radial-gradient(at 0% 100%, rgba(0, 102, 255, 0.15) 20%, rgba(247, 247, 247, 0) 40%),
        radial-gradient(at 55% 0%, rgba(0, 102, 255, 0.15) 20%, rgba(247, 247, 247, 0) 40%),
        radial-gradient(at 110% 100%, rgba(0, 102, 255, 0.15) 20%, rgba(247, 247, 247, 0) 40%);
    background-blend-mode: normal;

    .g-text-input {
        display: flex;
    }

    &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        width: 100%;

        font-size: var(--g-text-body-1-font-size);
        line-height: var(--g-text-header-1-line-height);
    }

    &__logo {
        display: flex;
        align-items: center;
        gap: 8px;

        font-size: 16px;
        font-weight: 600;
    }

    &__title {
        margin: 34px 0 16px;

        font-weight: 600;
        @include mixins.header-2-typography;
    }

    &__form-wrapper {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;

        width: 400px;
        min-width: 320px;
        padding: 40px;

        border-radius: 16px;
        background-color: var(--g-color-base-background);
    }

    &__field-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        width: 320px;
        margin-bottom: 16px;
        .g-text-input_state_error {
            flex-direction: column;
        }
    }

    &__button-sign-in {
        display: inline-flex;
        justify-content: center;
    }

    &__button-sso {
        margin-top: var(--g-spacing-2);
    }

    &__show-password-button {
        margin-left: 4px;
    }

    &__close {
        position: absolute;
        top: 40px;
        right: 40px;
    }
    &__general-error {
        width: 100%;
        height: var(--g-text-body-1-line-height);
        margin-top: var(--g-spacing-1);

        color: var(--g-color-text-danger);
    }
}