//@import "../../../abstracts/abstracts";

$news-feed-item-level-color-information: #3e8ff7;
$news-feed-item-level-color-success: #155724;
$news-feed-item-level-color-warning: #FF8800;
$news-feed-item-level-color-alert: #b5271a;
$news-feed-item-level-color-maintenance: #FFBB33;
$news-feed-item-level-color-new: #FF7000;

.dbqnf-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 15px;
    margin: 0 15px;
    @include scrollbar;

    .dbqnf-item {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        .dbqnf-title-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;

            .dbqnf-tag {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 1px; // This way the title is better aligned with the tag icon
                color: #000;

                svg {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }

            .dbqnf-title {
                font-size: $font-size-base;
                line-height: 18px; // Height of SVG icon
                font-weight: 800;
                color: $text-color-default;
            }
        }


        .dbqnf-summary-text {
            margin-bottom: 5px;
            margin-left: 23px; // Width of tag SVG + 5px margin
            font-size: $font-size-small;
            color: $text-color-default;

            p {
                margin-bottom: 0px;
            }
        }

        .dbqnf-publish-time-container {
            .dbqnf-publish-time {
                font-size: $font-size-small;
                color: #bbb;
                font-weight: 400;
                margin-left: 23px; // Width of tag SVG + 5px margin
            }
    
            .dbqnf-read-more-button {
                float: right;
                background: 0 none;
                font-size: 12px;
                color: $button-background-color;
                outline: 0;
                border: none;
    
                &:hover {
                    color: $button-hover-background-color;
                }
            }
        }

        &:last-child {  
            margin-bottom: 0px;
        }

        /* { Alert: 3, Information: 0, Maintenance: 4, New: 5, Success: 1, Warning: 2 }; */
        &[data-news-feed-item-level='0'] {
            // border-color: $news-feed-item-level-color-information;

            .dbqnf-tag {
                color: $news-feed-item-level-color-information;

                svg {
                    fill: $news-feed-item-level-color-information;
                }
            }
        }
        
        &[data-news-feed-item-level='1'] {
            // border-color: $news-feed-item-level-color-success;

            .dbqnf-tag {
                color: $news-feed-item-level-color-success;

                svg {
                    fill: $news-feed-item-level-color-success;
                }
            }
        }
        
        &[data-news-feed-item-level='2'] {
            // border-color: $news-feed-item-level-color-warning;

            .dbqnf-tag {
                color: $news-feed-item-level-color-warning;

                svg {
                    fill: $news-feed-item-level-color-warning;
                }
            }
        }
        
        &[data-news-feed-item-level='3'] {
            // border-color: $news-feed-item-level-color-alert;

            .dbqnf-tag {
                color: $news-feed-item-level-color-alert;

                svg {
                    fill: $news-feed-item-level-color-alert;
                }
            }
        }
        
        &[data-news-feed-item-level='4'] {
            // border-color: $news-feed-item-level-color-maintenance;

            .dbqnf-tag {
                color: $news-feed-item-level-color-maintenance;

                svg {
                    fill: $news-feed-item-level-color-maintenance;
                }
            }
        }
        
        &[data-news-feed-item-level='5'] {
            // border-color: $news-feed-item-level-color-new;

            .dbqnf-tag {
                color: $news-feed-item-level-color-new;

                svg {
                    fill: $news-feed-item-level-color-new;
                }
            }
        }
    }
}

.dbqnf-popup-body {
    padding: 30px;

    .dbqnf-popup-picture {
        width: 100%;
        margin-bottom: 15px;
    }

    // The dbqdb-footer is added as static HTML code to news feed popups with the "Short" NewsFeedItemType
    // This footer is usually generated by the rendering engine, however, this is a special case and we do
    // want the same style for "Short" and "Document" popups.
    .dbqdb-footer {
        margin: 0 -30px -30px;
    }
}