@layer base, layout, utilities, override;

@import "../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css" layer(base);

:root {
    --btn-primary-color: #002a91;
    --btn-primary-hover: #4065d0;
    --btn-primary-active: #1f3d96;
    --btn-primary-outline: #e8ecf9;
    --background-color: #ffffff;
    --accent-1: #f2f2f2;
    --accent-2: #e3e3e3;
    --accent-3: #d6d6d6;
    --accent-4: #212121;
    --placeholder-color: #cdcdcd;
    --muted: #4c554d;
    --secondary: #589e11;
    --secondary-hover: #7db642;
    --error: #d60000;
    --warning: #eb7300;
    --success: #0dd500;
}

@layer layout {
    a, body, h1, h2, h3, h4, h5, h6, p, table.body, td, th {
        font-family: 'Open Sans', Verdana, sans-serif;
    }

    label {
        font-size: 18px;
        font-weight: 300;

        &.form-label {
            font-size: 12px;
            font-weight: normal;
        }
    }

    small {
        font-size: 12px;
        font-weight: normal;
    }

    a {
        color: var(--btn-primary-color);

        &:hover {
            color: var(--btn-primary-hover);
            text-decoration: none;
        }

        &:active {
            color: var(--btn-primary-active);
        }
    }

    .ao-container {
        display: grid;
        justify-content: center;
        justify-items: center;
        overflow-x: clip;

        &.centered > div:first-child {
            font-size: 16px;
            font-weight: 300;
            width: min(100%, 450px);
        }
    }

    .alzuraBox {
        border-radius: 8px;
        margin: auto;
        max-width: 1140px;
        box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.2);
        background: var(--background-color) url("../images/alzura-logo-background-dapGG8K.svg") no-repeat right top;

        .boxHead {
            height: 42px;
            border-bottom: 1px solid var(--accent-1);
            background-color: rgba(226, 226, 226, 0.2);
        }

        .boxHeadIcon {
            display: inline-block;
            width: 50px;
            height: 42px;
            border-radius: 8px 0 0 0;
            background-color: var(--accent-2);
            padding: 10px 13px;
            margin-left: -15px;
        }

        .boxHeadTitle {
            display: inline-block;
            padding-left: 12px;
        }

        .left__side {
            background-image: linear-gradient(to bottom, #fff 10%, #eef5ff 44%, #fff 75%);
        }
    }

    .alzuraBox ::placeholder {
        font-size: 12px;
        color: var(--placeholder-color);
    }

    a.text-muted:hover {
        color: var(--muted);
        text-decoration: none;
    }

    .legalInfo {
        font-size: 12px;
        font-weight: 300;
    }

    .loginButton {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        background-color: var(--btn-primary-color);
        text-align: center;
        color: var(--background-color);

        &:hover {
            background-color: var(--btn-primary-hover);
            color: var(--background-color);
        }

        &:active {
            background-color: var(--btn-primary-active);
            color: var(--background-color);
        }
    }

    .login-button-tyre {
        width: 100%;
        height: 46px;
        border-radius: 4px;
        padding: 0;
        background-color: var(--secondary);
        text-align: center;
        color: var(--background-color);

        &:hover {
            background-color: var(--secondary-hover);
            color: var(--background-color);
        }

        &:active {
            background-color: var(--secondary-hover);
            color: var(--background-color);
        }

        .login-button-tyre--main-text {
            font-size: 16px;
            font-weight: bold;
        }
        .login-button-tyre--sub-text {
            font-size: 12px;
        }
    }

    .info__circle {
        display: inline-block;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        background-color: rgba(0, 42, 145, 0.1);
        font-size: 12px;
        font-weight: bold;
        text-align: center;
    }

    .footerBox {
        font-size: 12px;
        max-width: 1140px;
        align-items: center;

        select {
            border: 0;
            outline: 0;
            padding: .25rem;
        }
    }

    input.success {
        background: url("../images/enabled-CWgrK1j.svg") no-repeat right 6px center;
    }

    input.error, input.touched:invalid {
        border: 1px solid var(--error);
        background: url("../images/disabled-c8UTtMy.svg") no-repeat right 6px center;
    }

    .errorText {
        color: var(--error);
        font-size: 12px;
        background: url("../images/info-red-HGEN59i.svg") no-repeat scroll left center;
        padding: 8px 0 8px 20px;
    }

    .bigSpace {
        margin-bottom: 64px;
    }

    .alzuraIdBox {
        border-radius: 16px;
        background: url("../images/user-icon-hvPT82d.svg") no-repeat scroll left 4px center;
        padding: 6px 0 6px 36px;
        font-size: 12px;
        font-weight: bold;
    }

    .greyBox {
        background-image: linear-gradient(to bottom, #f5f5f5, var(--background-color));
        margin-top: -180px;
        height: 180px;
        border-radius: 0 0 8px 8px;
    }

    .password-strength__label {
        font-size: 14px;
        text-align: right;
        padding-left: 0;
    }

    .password-strength__progress {
        height: 8px;
        padding-right: 0;

        .progress-bar {
            &.password-weak {
                width: 25%;
                background-color: var(--error);
            }

            &.password-medium {
                width: 50%;
                background-color: var(--warning);
            }

            &.password-strong {
                width: 100%;
                background-color: var(--success);
            }
        }
    }

    .password__toggle {
        float: right;
        margin-right: 30px;
        margin-top: -25px;
        position: relative;
    }

    @media (min-width: 1200px) {
        .password-info {
            position: relative;

            .tooltip__text {
                visibility: hidden;
                width: 300px;
                box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.5);
                background-color: var(--background-color);
                border-radius: 6px;
                padding: 20px;
                position: absolute;
                z-index: 1;
                top: -110px;
                left: 105%;

                &:after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    right: 100%;
                    margin-top: -10px;
                    border-width: 10px;
                    border-style: solid;
                    border-color: transparent var(--background-color) transparent transparent;
                }
            }

            &:hover .tooltip__text {
                visibility: visible;
            }
        }
    }

    @media (max-width: 991.98px) {
        .alzuraBox {
            background-size: 35vw;
            border-radius: 0;
            box-shadow: none;

            .boxHeadIcon {
                border-radius: 0;
            }
        }

        .centeredBox {
            max-width: 100%;
            margin: 0;
        }
    }

    .btn-primary {
        background-color: var(--btn-primary-color);

        &:hover {
            background-color: var(--btn-primary-hover);
        }

        &:active {
            background-color: var(--btn-primary-active);
        }
    }
}

@layer utilities {
    .h-auto {
        height: auto;
    }

    .icon__size--medium {
        width: 6rem;
        height: 6rem;
    }

    .text-size--10 {
        font-size: 10px;
    }

    .text-size--12 {
        font-size: 12px;
    }

    .text-size--14 {
        font-size: 14px;
    }

    .text-size--16 {
        font-size: 16px;
    }
}

@layer override {
    .form-select {
        --bs-form-select-bg-img: url("../images/bootstrap/angle-down-QPJt_mP.svg");
        background-image: var(--bs-form-select-bg-img);
    }

    .form-check-input:checked[type=checkbox] {
        --bs-form-check-bg-image: url("../images/bootstrap/check-XCvMdZn.svg");
        background-image: var(--bs-form-check-bg-image);
    }
}