// Variables
$alert-info-background-color: color(background-color-info);
$alert-info-border-color: color(border-color-info);
$alert-info-text-color: color(text-color-info);
$alert-warning-background-color: color(background-color-warning);
$alert-warning-border-color: color(border-color-warning);
$alert-warning-text-color: color(text-color-warning);
$alert-error-background-color: color(background-color-error);
$alert-error-border-color: color(border-color-error);
$alert-error-text-color: color(text-color-error);
$alert-success-background-color: color(background-color-success);
$alert-success-border-color: color(border-color-success);
$alert-success-text-color: color(text-color-success);

.dbqkbc-articles-container .dbqkbc-article-content .dbq-document,
.dbq-document {
    .dbqdb-alert {
        //margin: 0 0 10px 0 !important;
        margin-bottom: $global-margin;
        padding: $global-margin;
        border-radius: $border-radius-button-default;
        
        & > .dbqdb-alert-container {
            display: flex;
            flex-direction: row;
            gap: $global-margin;

            .dbqdb-alert-icon-container {
                width: 24px;

                .dbqdb-alert-icon {
                    width: 24px;
                    height: 24px;

                    // &[data-alert-block-type='0'] {
                    //     fill: $alert-error-text-color;
                    // }

                    // &[data-alert-block-type='1'] {
                    //     fill: $alert-warning-text-color;
                    // }

                    // &[data-alert-block-type='2'] {
                    //     fill: $alert-info-text-color;
                    // }

                    // &[data-alert-block-type='3'] {
                    //     fill: $alert-success-text-color;
                    // }
                }
            }

            .dbqdb-alert-content-container {
                width: 100%;
                
                h1, h2, h3, h4, .dbq-element-header-5, p {
                    line-height: 24px;
                }

                .dbq-element-header-5 {
                    margin: 0;
                }

                h1, h2, h3, h4, .dbq-element-header-5 {
                    font-weight: bold;
                    font-size: 14px;
                }

                .element:last-of-type {
                    margin-bottom: 0;

                    h1, h2, h3, h4, .dbq-element-header-5, p {
                        margin-bottom: 0;
                    }
                }
            }
        }
    
        &.alert-info {
            background-color: $alert-info-background-color;
            border-color: $alert-info-border-color;

            .dbqdb-alert-icon-container {
                .dbqdb-alert-icon {
                    fill: $alert-info-text-color;
                }
            }
            .dbqdb-alert-content-container {
                h1, h2, h3, h4, .dbq-element-header-5, p {
                    color: $alert-info-text-color !important;
                }

                // Insert properties
                .dbqdb-insert-property-header {
                    .dbqdb-icon-inline-info-tooltip {
                        svg {
                            fill: $alert-info-text-color;
                        }
                    }
                }
            }
        }

        &.alert-warning {
            background-color: $alert-warning-background-color;
            border-color: $alert-warning-border-color;

            .dbqdb-alert-icon-container {
                .dbqdb-alert-icon {
                    fill: $alert-warning-text-color;
                }
            }
            .dbqdb-alert-content-container {
                h1, h2, h3, h4, .dbq-element-header-5, p {
                    color: $alert-warning-text-color !important;
                }

                // Insert properties
                .dbqdb-insert-property-header {
                    .dbqdb-icon-inline-info-tooltip {
                        svg {
                            fill: $alert-warning-text-color;
                        }
                    }
                }
            }
        }

        &.alert-success {
            background-color: $alert-success-background-color;
            border-color: $alert-success-border-color;

            .dbqdb-alert-icon-container {
                .dbqdb-alert-icon {
                    fill: $alert-success-text-color;
                }
            }
            .dbqdb-alert-content-container {
                h1, h2, h3, h4, .dbq-element-header-5, p {
                    color: $alert-success-text-color !important;
                }

                // Insert properties
                .dbqdb-insert-property-header {
                    .dbqdb-icon-inline-info-tooltip {
                        svg {
                            fill: $alert-success-text-color;
                        }
                    }
                }
            }
        }

        &.alert-danger {
            background-color: $alert-error-background-color;
            border-color: $alert-error-border-color;

            .dbqdb-alert-icon-container {
                .dbqdb-alert-icon {
                    fill: $alert-error-text-color;
                }
            }
            .dbqdb-alert-content-container {
                h1, h2, h3, h4, .dbq-element-header-5, p {
                    color: $alert-error-text-color !important;
                }

                // Insert properties
                .dbqdb-insert-property-header {
                    .dbqdb-icon-inline-info-tooltip {
                        svg {
                            fill: $alert-error-text-color;
                        }
                    }
                }
            }
        }
    }
}