// TODO: Add style change.
.light {
    &.login-wrapper {
        background-color: white;
        background-image: url('@/assets/opekf-login-bg-light.png');
    }
}

.dark {
    &.login-wrapper {
        background-color: var(--td-bg-color-page);
        background-image: url('@/assets/opekf-login-bg-dark.png');
    }
}

.title-container {
    .welcome {
        font: var(--td-font-headline-medium);
        background-image: linear-gradient(
            to right,
            var(--td-brand-color-8),
            var(--td-brand-color-2)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        margin-top: var(--td-comp-margin-xs);

        &.margin-no {
            margin-top: 0;
        }
    }

    .title {
        font: var(--td-font-headline-large);
        color: var(--td-text-color-primary);
        margin-top: var(--td-comp-margin-xs);

        &.margin-no {
            margin-top: 0;
        }
    }

    .sub-title {
        margin-top: var(--td-comp-margin-xxl);
        color: var(--td-text-color-primary);

        .tip {
            display: inline-block;
            margin-right: var(--td-comp-margin-s);
            font: var(--td-font-body-medium);
            cursor: pointer;
        }
    }
}

.login-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: 100%;
    position: relative;
    background-image: url('@/assets/opekf-login-bg-light.png');
}

.login-container {
    position: absolute;
    top: 14%;
    left: 7%;
    min-height: 500px;
    padding: var(--td-pop-padding-xxl);
    border-radius: var(--td-radius-default);
}

.item-container {
    width: 400px;
    margin-top: var(--td-comp-margin-xxxxl);

    .check-container-login {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.remember-pwd {
            margin-bottom: var(--td-comp-margin-l);
            justify-content: space-between;
        }

        span {
            color: var(--td-text-color-primary);
            font-weight: 500;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .check-container {
        // display: flex;
        align-items: center;

        span {
            color: var(--td-brand-color);

            &:hover {
                cursor: pointer;
            }
        }
    }

    .verification-code {
        // display: flex;
        align-items: center;

        :deep(.t-form__controls) {
            width: 100%;

            button {
                height: var(--td-size-12);
                flex-shrink: 0;
                margin-left: var(--td-comp-margin-l);
            }
        }
    }
}

.check-container {
    font: var(--td-font-body-medium);
    color: var(--td-text-color-secondary);
}

.copyright {
    font: var(--td-font-body-medium);
    position: absolute;
    left: 5%;
    bottom: 64px;
    color: var(--td-text-color-secondary);
}

@media screen and (max-height: 700px) {
    .copyright {
        display: none;
    }
}
