.arlet-alert-container {
    $color-blue: #043ebb;
    $color-blue-light: #4f4fff;
    $color-blue-dark: #13131b;
    $color-green: #066106;
    $color-green-light: #4fff4f;
    $color-green-dark: #131b13;
    $color-red: #c00000;
    $color-red-light: #ff4f4f;
    $color-red-dark: #3b1313;
    $color-yellow: #8b8b3b;
    $color-yellow-light: #ffff4f;
    $color-yellow-dark: #3b3b13;
    $color-orange: #c06a00;
    $color-orange-light: #ffb84f;
    $color-orange-dark: #3b3b13;
    $color-black-light: #4f4f4f;
    $color-black-dark: #131313;
    $color-black-dark-light: #3b3b3b;
    $color-gray: #b0b0b0;
    $color-gray-light: #d0d0d0;
    $color-gray-dark: #7f7f7f;
    $color-gray-dark-light: #a0a0a0;
    $color-gray-dark-dark: #2c2c2c;
    $color-white: #ffffff;
    $color-black: #000000;

    ::-webkit-scrollbar {
        width: 3px;
        background-color: rgba($color-gray-dark-dark, 0.5);
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba($color-gray-dark, 0.5);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba($color-gray-dark, 0.8);
    }

    ::-webkit-scrollbar-track {
        background-color: rgba($color-gray-dark-dark, 0.5);
    }

    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: rgba($color-black, 0.3);
    font-family: sans-serif;

    .arlet-alert {
        padding: 10px 20px;
        padding-right: 10px;
        border-radius: 5px;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;

        .arlet-alert__icon {
            margin-right: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            color: rgba($color-white, 0.5);
            padding: 10px;
            width: 50px;
            height: 50px;

        }

        button {
            &.arlet-alert__close {
                margin-right: 10px;
                background-color: transparent;
                border: none;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                color: rgba($color-white, 0.5);
                padding: 10px;
                width: 50px;
                height: 50px;

            }

            &:hover {
                cursor: pointer;
                color: rgba($color-white, 1);
            }
        }

        .arlet-alert__text {
            width: calc(100% - 100px);

            .arlet-alert__title {
                font-size: 18px;
                font-weight: bold;
                color: rgba($color-white, 1);
            }

            .arlet-alert__message {
                font-size: 14px;
                color: rgba($color-white, 0.6);
                margin-top: 5px;
            }

            .arlet-alert__buttons {
                display: flex;
                justify-content: flex-end;
                margin-top: 10px;

                button {
                    border: none;
                    border-radius: 5px;
                    padding: 5px 10px;
                    font-size: 14px;
                    margin-left: 10px;
                    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

                    &:hover {
                        cursor: pointer;
                        filter: brightness(0.8);
                    }
                }
            }
        }

        background-image: linear-gradient(to right, $color-blue, $color-gray-dark-dark );
    }

    &.error-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-red, $color-gray-dark-dark );
        }
    }

    &.success-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-green, $color-gray-dark-dark );
        }
    }

    &.info-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-blue, $color-gray-dark-dark );
        }
    }

    &.warning-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-yellow, $color-gray-dark-dark );
        }
    }

    &.form-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-orange, $color-gray-dark-dark );
        }
    }

    &.question-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-gray, $color-gray-dark-dark );
        }
    }

    &.confirm-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-blue-light, $color-gray-dark-dark );
        }
    }

    &.dark-type {
        .arlet-alert {
            background-image: linear-gradient(to right, $color-blue-dark, $color-gray-dark-dark );
        }
    }

    &.blur-dark-type {
        .arlet-alert {
            background-image: linear-gradient(to right, rgba($color-black, 0.5), rgba($color-black, 0.5));
        }
    }

    &.custom-type {
        .arlet-alert {
            background-image: none;
        }
    }

    &.fade-in {
        animation: fadeIn 0.2s ease-in-out;
    }

    &.fade-out {
        animation: fadeOut 0.2s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: scale(0.9);
        }
    }

    .form-container-arlet {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;

        .form-group-arlet {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 7px;

            label {
                color: rgba($color-white, .8);
                font-size: 14px;
                display: inline-block;
                width: 100%;
            }

            input,
            select,
            textarea {
                width: 150px;
                padding: 10px;
                border-radius: 5px;
                border: 1px solid rgba($color-white, .3);
                background-color: rgba($color-white, .1);
                color: rgba($color-white, .8);
                font-size: 14px;
                margin-top: 5px;
                margin-bottom: 10px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

                &:focus {
                    outline: none;
                    border: 1px solid rgba($color-white, .8);
                    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
                }

                &.error {
                    border: 1px solid rgba($color-red, .8);
                    box-shadow: 0 0 5px rgba($color-red, .5);
                }

                &[type="checkbox"],
                &[type="radio"] {
                    width: auto;
                    margin-right: 5px;
                    margin-left: 0;
                    padding: 0;
                    background-color: transparent;
                    border: none;
                    box-shadow: none;

                    &:checked {
                        background-color: rgba($color-white, .1);
                        border: 1px solid rgba($color-white, .8);
                        box-shadow: 0 0 5px rgba(0, 0, 0, .5);
                    }
                }
            }

            select {
                background-color: rgba($color-white, .1);
                color: rgba($color-white, .8);
                border: 1px solid rgba($color-white, .3);
                border-radius: 5px;
                padding: 10px;
                font-size: 14px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

                &.error {
                    border: 1px solid rgba($color-red, .8);
                    box-shadow: 0 0 5px rgba($color-red, .5);
                }

                &:focus {
                    outline: none;
                    border: 1px solid rgba($color-white, .8);
                    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
                }

                option {
                    background-color: rgba($color-gray-dark-dark, 1);
                    color: rgba($color-white, .8);
                    padding: 10px;

                    &:hover {
                        background-color: rgba($color-gray-dark-light, 1);
                        color: rgba($color-white, 1);
                    }
                }
            }
        }
    }

    &.left-style {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }
    }

    &.right-style {
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }
    }

    &.container-style {
        justify-content: center;
        align-items: center;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: calc(100% - 30px);
            width: calc(100% - 20px);
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }
    }

    &.left-inputs-left-style {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-start;
            width: 100%;
        }
    }

    &.left-inputs-right-style {
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-end;
            width: 100%;
        }
    }

    &.right-inputs-left-style {
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-start;
            width: 100%;
        }
    }

    &.right-inputs-right-style {
        justify-content: flex-end;
        align-items: flex-end;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: 50vw;
            width: 100%;
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-end;
            width: 100%;
        }
    }

    &.container-input-left-style {
        justify-content: center;
        align-items: center;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: calc(100% - 30px);
            width: calc(100% - 20px);
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-start;
            width: 100%;
        }


    }

    &.container-input-right-style {
        justify-content: center;
        align-items: center;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: calc(100% - 30px);
            width: calc(100% - 20px);
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-end;
            width: 100%;
        }
    }

    &.container-inputs-left-style {
        justify-content: center;
        align-items: center;
        padding: 0px;
        overflow: auto;
        top: 0;

        .arlet-alert {
            height: 100%;
            overflow: auto;
            border-radius: 0%;
            max-width: calc(100% - 30px);
            width: calc(100% - 20px);
            min-width: 300px;
            align-items: flex-start;

            .arlet-alert__text {
                width: 100%;
            }

            .arlet-alert__icon+.arlet-alert__text {
                width: calc(100% - 50px);
            }
        }

        .form-container-arlet {
            justify-content: flex-start;
            width: 100%;
        }
    }
}