@charset "UTF-8";
// Morten Mitchell Larød 2020


.content-overview {
    .grid-aside,
    .tool-on-top,
    .other,
    .bundles,
    .article-list article ul.tools li.create-bundle {
        display: none !important;
    }
    .co {
        display: block !important;
    }
    .position-lock {
        visibility: hidden;;
    }
    .grid-container,
    .grid-main  {
        grid-template-columns: 1fr;
    }
    header .grid-container  {
        grid-template-columns: 6fr 4fr;
    }
    header.default {
        margin: 0 0 $gap-small $gap-default;
        display: flex;
        align-items: center;
        .custom-select {
            width: 200px;
            margin-right: $gap-default;
            background-color: $c-white;
        }
    }
    .view-rate {
        margin-top: 8px;
        @include subtitle-2;
    }
    ol.articles {
        list-style: none;
        padding: $gap-small 0 0 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 530px;
        height: calc(100vh - 150px);
    }
    .article-list h2 {
        padding: 0 0 4px 0;
    }
    .article-list .article {
        display: flex;
    }
    .article-list article .article-container {
        min-height: 100px;
    }
    .article-list article .teaser-content {
        cursor: default;
    }
    .article-list .content {
        overflow: scroll;
    }
    .article-list .content::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .article-list .content::-webkit-scrollbar:vertical {
        display: none;
    }
    .article-list .content::-webkit-scrollbar:horizontal {
        height: 8px;
    }
    .article-list .content::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 0;
        background-color: $warm-grey-600;
    }

    .article-list .t-in-tp .level-2,
    .article-list .t-in-sp .level-2 {
        padding-left: 24px;
    }
    .article-list .t-in-tp .level-2:before {
        content: 'TP';
    }
    .article-list .t-in-sp .level-2:before {
        content: 'SP';
    }
    .article-list .t-in-tp .level-2:before, .article-list .t-in-sp .level-2:before {
        position: absolute;
        top: 0;
        left: 0;
        font-family: "Source Sans Pro", "SourceSansPro-Regular";
        font-size: 13px;
        letter-spacing: 0px;
        line-height: 16px;
        font-weight: 400;
        color: #31312f;
        font-size: 11px;
        text-align: center;
        color: black;
        background-color: #fed865;
        border-radius: 2px;
        font-weight: 600;
        line-height: 18px;
        width: 18px;
        height: 18px;
    }

    .article-list {
        &.co {
            counter-reset: content-overview;
            header { 
                .tool {
                    float: right;
                }
                span {
                    display: inline-block;
                    padding: $gap-tiny 0;
                }
                .filters {
                    display: inline-block;
                    button {
                        &.active {
                            font-weight: 700;
                            color: $fc-dark;
                        }
                    }
                }
                &:after {
                    content: "";
                    display: table;
                    clear: both;
                }
            }
        }
        &.co {
            //counter-reset: co;
            li.article {
                /*
                &::before {
                    counter-increment: co;
                    content: counter(co);
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: $gap-small 0 0;
                    color: $fc-dark;
                    font-weight: 400;
                    font-size: 15px;
                    width: 36px;
                    line-height: 1;
                    text-align: center;
                    border-bottom: 1px solid $c-neutral;
                    z-index: 1;
                }
                */      
                .teaser-content {
                    &:before {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        border: 2px solid transparent;
                        border-radius: 4px;
                        margin: -2px;
                    }
                }
            }
        }
        &.co {
            li.article {
                &:hover {
                    .teaser-content {
                        &:before {
                            transition: .2s ease-in .2s;
                            content: "";
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            border: 2px solid $sky-blue-400;
                            border-radius: 4px;
                            margin: -2px;
                        }
                    }
                    .tools {
                        transition: opacity .2s ease-in .2s;
                        opacity: 1 !important;
                        z-index: 2;
                    }
                }
            }
        }
        &.co {
            li.article {
                .editable .teaser-content {
                    &:before {
                        border: 2px solid $c-primary;
                    }
                }
                &:hover {
                    .editable .teaser-content {
                        &:before {
                            border: 2px solid $c-primary;
                        }
                    }
                }
            }
        }
    }
        
}