/** Materio Template Vuetify styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

@use "@/styles/desktop/template/base/mixins";
@use "@/styles/desktop/configured-variables/template" as variables;

/* 👉 Alert
/ ℹ️ custom icon styling */

// 👉 Alert
.v-alert {
    .v-alert__content {
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.375rem;

        .v-alert-title {
            margin-block-end: 0.25rem;
        }
    }

    &:not(.v-alert--prominent) .v-alert__prepend {
        border-radius: 0.375rem;
        block-size: 1.875rem;
        inline-size: 1.875rem;

        .v-icon {
            margin: auto;
            block-size: 1.375rem !important;
            font-size: 1.375rem !important;
            inline-size: 1.375rem !important;
        }
    }

    &:not(.v-alert--prominent) {
        &.v-alert--variant-flat,
        &.v-alert--variant-elevated {
            .v-alert__prepend {
                background-color: #fff;

                @include mixins.elevation(2);
            }
        }

        &.v-alert--variant-tonal {
            .v-alert__prepend {
                z-index: 1;
            }
        }
    }

    .v-alert__close {
        .v-btn--icon {
            --v-btn-height: 34px;

            .v-btn__content {
                padding: 0.375rem;

                .v-icon {
                    block-size: 1.25rem;
                    font-size: 1.25rem;
                    inline-size: 1.25rem;
                }
            }
        }
    }
}

@each $color-name in variables.$theme-colors-name {
    .v-alert {
        &:not(.v-alert--prominent) {
            &.bg-#{$color-name},
            &.text-#{$color-name} {
                .v-alert__prepend .v-icon {
                    color: rgb(var(--v-theme-#{$color-name})) !important;
                }
            }

            &.v-alert--variant-tonal {
                &.text-#{$color-name},
                &.bg-#{$color-name} {
                    .v-alert__underlay {
                        background: rgb(var(--v-theme-#{$color-name})) !important;
                    }

                    .v-alert__prepend {
                        background-color: rgb(var(--v-theme-#{$color-name}));

                        .v-icon {
                            color: #fff !important;
                        }
                    }
                }
            }

            &.v-alert--variant-outlined {
                &.text-#{$color-name},
                &.bg-#{$color-name} {
                    .v-alert__prepend {
                        background-color: rgba(var(--v-theme-#{$color-name}), 0.16);
                    }
                }
            }
        }
    }
}
