:host{
    width: var(--width);
    max-width: var(--max-width);
}
.jb-notification-web-component{
    width: var(--width);
    max-width: var(--max-width);
    display: none;
    pointer-events: all;
    &.--show{
        display: block;
    }
    &.--info{
        .notification-content{
            background-color: var(--bg-color-info);
        }
        .message-texts-wrapper{
            color:var(--text-color-info);
        }
        
    }
    &.--warning{
        .notification-content{
            background-color: var(--bg-color-warning);
        }
        .message-texts-wrapper{
            color:var(--text-color-warning);
        }
        
    }
    &.--success{
        .notification-content{
            background-color: var(--bg-color-success);
        }
        .message-texts-wrapper{
            color:var(--text-color-success);
        }
        
    }
    &.--error{
        .notification-content{
           background-color: var(--bg-color-error);
        }
        .message-texts-wrapper{
            color:var(--text-color-error);
        }
        
    }
    .notification-content{
        border-radius: var(--border-radius);
        width: var(--width);
        max-width: var(--max-width);
        padding: var(--padding);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: var(--grid-template-columns);
        grid-template-rows: auto;
        grid-template-areas: "icon texts";
        gap:var(--gap);
        align-items: var(--content-align-items);
        border: var(--border-width) var(--border-style) var(--border-color);
        box-shadow: var(--box-shadow);
        .icon-wrapper{
            grid-area: icon;
            width: var(--icon-size);
            height: var(--icon-size);
            .notification-icon{
                width: 100%;
                height: 100%;
                stroke: none;
                .icon-bg{
                    stroke: none;
                    stroke-width: 0;
                    fill:var(--icon-bg-color);
                }
                .symbol{
                    &.--hidden{
                        display: none;
                    }
                    &.info-symbol{
                        --symbol-color:var(--icon-symbol-color-info);
                        .i-dot{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                        }
                        .i-line{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                            stroke-dasharray: 5px 5px;
                        }
                    }
                    &.warning-symbol{
                        --symbol-color:var(--icon-symbol-color-warning);
                        .ri-dot{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                        }
                        .ri-line{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                            stroke-dasharray: 0.4375rem 0.4375rem;
                        }
                    }
                    &.error-symbol{
                        --symbol-color:var(--icon-symbol-color-error);
                        .line1{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                            stroke-dasharray: 0.75rem 0.75rem;
                        }
                        .line2{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                            stroke-dasharray: 0.75rem 0.75rem;
                        }
                    }
                    &.success-symbol{
                        --symbol-color:var(--icon-symbol-color-success);
                        .tik{
                            stroke: var(--symbol-color);
                            stroke-width: 3px;
                            stroke-linecap: round;
                            stroke-linejoin: round;
                            stroke-dasharray: 1rem 1rem;
                        }
                    }
                }
                
            }
        }
        .message-texts-wrapper{
            grid-area: texts;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--text-gap);
            
            .title-wrapper{
                font-size: var(--title-font-size);
                font-weight: var(--title-font-weight);
                text-align: start;
            }
            .desc-wrapper{
                font-size: var(--desc-font-size);
                font-weight: var(--desc-font-weight);;
                &:empty{
                    display: none;
                }
            }
        }

    }
}