// search(aggregate) widget.scss
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';

$search-widget-width: $tabpane-extended-width;
$search-widget-preview-width: 440px;

//widget tabpane
.widget-search.tabpane,
.widget-aggregate.tabpane {
    width: auto;

    .widget-header {
        display: none;
    }

    .tabcontent {
        position: relative;
        overflow: initial;
        padding: 0;
        left: 0; right: 0;
        height: 100%;
    }
    .widget-content {
        position: relative;
        top: 0;
        overflow: initial;
        padding-bottom: 0;
        border-top: 0;
        height: 100%;
        > div {
            height: 100%;
        }
    }
}

.sd-widget.search,
.tabpane .sd-widget.aggregate {
    position: relative;
    height: 100%;
}

//widget content
.sd-widget.search,
.sd-widget.aggregate {
    .content-search {
        position: relative;
        background: $tabpane-background;
        width: $search-widget-width;
        height: 100%;
        overflow: hidden;
        &.extended {
            width: $search-widget-width + $search-widget-preview-width;
        }
    }

    .search-container {
        position: absolute;
        width: $search-widget-width;
        top: 0; left: 0; bottom: 0;
        .search-box {
            display: flex;
            box-sizing: border-box;
            left: 0; right: 0; top: 0;
            height: $nav-height;
            border-bottom: 1px solid #dcdcdc;
            background: #fff url(~images/search-icon.png) no-repeat 15px 16px;
            input {
                position: static;
                flex: 1;
                width: auto;
                height: 100%;
                padding-left: 46px;
                box-sizing: border-box;
                border: 0 !important;
                background: transparent;
                &:focus {
                    @include box-shadow(none !important);
                }
            }
            .more-actions {
                position: relative;
                margin: auto;
                height: 22px;
                width: 28px;
                right: 0px;
                top: 0;

            }
        }
        .filter-list {
            position: absolute;
            top: $nav-height;
            left: 0; right: 0;
            height: $nav-height;
            @include border-box();
            border-bottom: 1px solid #dcdcdc;
            padding: 10px;
        }
        .content-list {
            position: absolute;
            top: $nav-height;
            bottom: $bottom-view-padding - 2rem;
            left: 0;
            right: 0;
            padding: 0 10px 10px;
            overflow: auto;
        }
    }

    .preview-container {
        width: $search-widget-preview-width;
        position: absolute;
        left: $search-widget-width;
        bottom: 0; top: 0;
        border-right: 1px solid #bbb;
        background: #fff;
        @include border-box();
        @include box-shadow(inset 1px 0 0 #dcdcdc);
        > header {
            border-bottom: 1px solid #dcdcdc;
            padding: 0 15px;
        }
        .close-preview {
            position: absolute;
            right: 10px;
            top: 10px;
        }
        > .content-item-preview {
            position: absolute;
            top: $nav-height;
            bottom: 0;
            left: 0 ;right: 0;
            padding: 20px;
            overflow: auto;
        }
    }
}


.sd-widget.search {
    .search-container {
        .content-list {
             top: 2*$nav-height;
            > ul {
                padding-right: 10px;
                > li {
                    position: relative;
                    background: $white;
                    border-bottom: 1px solid #ededed;
                    @include border-box();
                    padding: 7px 10px;
                    line-height: 12px;
                    border-right: 2px solid #fff;
                    .select-box {
                        width: 32px;
                        height: 21px;
                        float: left;
                        margin-right: 10px;
                        .select {
                            position: absolute;
                            left: 15px;
                            top: 10px;
                            display: none;
                        }
                        i {
                            display: inline-block;
                        }
                    }
                    &:not(.added) {
                        .select-box:hover {
                            .select {
                                display: block;
                            }
                            i {
                                display: none;
                            }
                        }
                    }
                    .item-functions {
                        display: none;
                        position: absolute;
                        right: 0; top: 0;
                        li {
                            padding: 6px;
                        }
                    }
                    &:hover {
                        background: #f4f4f4;
                        cursor: pointer;
                        padding-right: 40px;
                        border-right-color: #f4f4f4;
                        .item-functions {
                            display: block;
                        }
                    }
                    [class^="filetype-icon-"] {
                        margin: -1px 4px 0 -4px;
                        @include opacity(80);
                    }
                    p {
                        overflow: hidden;
                        width: 80%;
                        height: 18px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-left: 0;
                        .keyword {
                            @include text-semibold();
                            text-transform: uppercase;
                            color: #216278;
                            margin-right: 10px;
                        }
                    }
                    .group-select {
                        .dropdown__menu {
                            margin-top: -3px;
                            padding: 0;
                            &:before {
                                display: none;
                            }
                            > li {
                                padding: 3px 6px;
                                &:first-child {
                                    padding-top: 6px;
                                }
                                &:last-child {
                                    padding-bottom: 6px;
                                }

                            }
                        }
                    }

                    &.added {
                        background: #fafafa;
                        border-right-color: #ddd;
                        @include opacity(50);
                        &:hover {
                            padding-right: 10px;
                        }
                    }
                    &.active {
                        background: $sd-hover;
                        border-right-color: $sd-blue;
                    }
                    &.multi-select {
                        background: #ccfbd6;
                        border-bottom-color: #a4e4b1;
                    }
                }
            }
        }
    }
}


.content-list {
    .stage {
        margin: 10px 0 15px;
        .stage-content {
            margin: 5px 0 20px;
            overflow-y: auto;
            position: relative;
        }
    }
}
.widget-container {
    .content-list-holder {
        background-color: #fafafa;
        .desk {
            width: 100%;
        }
    }
    .content-list {
        .stage {
            margin: 10px 0 0;
            .stage-header {
                margin: 0 4px 4px 4px;
            }
            .stage-content {
                padding: 5px 3px;
                margin: 0 0 10px;
            }
        }
    }
}

.stage-header {
    display: flex;
    align-items: center;
    height: 20px;
    margin-bottom: 8px;
    .stage-header__line, .stage-header__stretch-bar {
        height: 1px;
        margin: auto 4px;
        background: #dcdcdc;
        flex: 1;
    }
    .stage-header__stretch-bar {
        background: transparent;
        margin: auto 0;
    }
    .stage-header__name {
        font-size: 11px;
        line-height: 11px;
        @include text-semibold();
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        a, .stage-header__name-part {
            display: inline-flex;
            align-items: center; 
        }
        span + span {
            margin-left: 5px;
        }
    }
    .stage-header__separator {
        padding: 0 6px;
    }
    .stage-header__toggle {
        border: 0;
        padding: 0;
        margin: 0 5px 0 0;
        display: flex;
        background: transparent;
        i {
            -webkit-transition: all 0.2s ease;
            -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        &.closed {
            i {
                @include rotate(-90deg);
                margin: auto;
            }
        }
    }
    .stage-header__number, 
    .stage-header__notification {
        margin: 0 0 0 4px;
    }
    .stage-header__name + .stage-header__number {
        margin-left: 10px;
    }
}

.sd-kanban-list__board-header {
    .stage-header {
        margin-bottom: 0;
    }
}

.notification-label, .label-total {
    margin: 0;
    box-sizing: border-box;
    padding: 4px 6px;
    height: 16px;
    @include border-radius(10px);
    color: $white !important;
    background: $sd-blue;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: .06em;
    @include text-normal();
    vertical-align: middle;
}

.label-total {
    background: $sd-gray-text;
}
.refresh-box {
    display: flex;
    button {
        background: none;
        &.btnRefresh {
            margin-right: 3px;
            padding-left: 0;
            height: 26px;
            position: absolute;
            right: 12px;
            &:hover {
                @include opacity(90);
            }
        }
    }
}

.content-list-holder {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    bottom: 0;

    .desk {
        width: 99%;
    }
}
.sd-widget.aggregate {
    .content-list-holder .content-list {
        padding: 0 5px;
    }
    .preview.preview-widget {
        opacity: 0;
        animation-delay: 0.5s;
        animation: fadeIn3 0.2s ease-out 1;
        opacity: 1;
        
        
        ul.nav {
            height: 35px;
            line-height: 35px;
            background: inherit;
            > li {
                > button {
                    height: 35px;
                    line-height: 19px;
                }
            }
        }
        ul.nav.nav-tabs {
            height: 35px;
            line-height: 35px;
            border-bottom: none;

        }
        .content-item-preview {
            .content-container, .metadata-view {
                top: 70px;
            }
        }
        .package-item.item {
            .item-actions-menu {
                display: none;
            }
        }
    }
    .preview.preview-widget.custom-widget {
        .nav {
            display: none;
        }
        ul.nav.nav-tabs {
            display: flex;
            border-top: 1px solid rgba(123,123,123,0.3);
            box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 -1px 2px 0 rgba(0, 0, 0, 0.08);
        }
        .content-item-preview {
            .content-container, .metadata-view {
                top: 36px;
            }
        }

    }
}

.aggregate-widget-config {
    .legend {
        color: $grayLight;
        text-transform: none;
        font-size: 16px;
        color: #333;
        font-weight: 400;
        margin-bottom: 16px;
        margin-top: 10px;
        padding: 0;
    }
    .legend + div[sd-toggle-box] {
        margin-top: 30px;
    }
    .desk {
        padding: 5px 0;
        border-bottom: 1px dotted rgba(123,123,123,0.5);
        &:first-of-type{
            border-top: 1px dotted rgba(123,123,123,0.5);
        }
        &--item-count {
            display: flex;
            align-items: center;
            .desk-title {
                flex-grow: 1;
            }
            .box-items-count {
                width: 14%;
            }
        }

    }
    .content {
        .desk:first-of-type {
                border-top: 1px dotted rgba(123,123,123,0.5) !important ;
            }
    }
    .desk-title {
        font-size: 14px;
        @include text-semibold();
        padding: 5px 0;

        i {
            font-size: 12px;
            font-weight: 100;
        }
        .search-description {
            font-size: 12px;
            font-weight: 300;
            color: #747474;
        }
        &--80 {
            width: 80%;
        }
        &--saved-search {
            display: flex;
            .switch {
                flex-grow: 0;
                flex-shrink: 0;
            }
            .desk-title__text {
                flex-grow: 1;
            }
        }
    }
    .desk-title__text {
        display: inline-block;
        padding-left: 1rem;
    }
    .stages {
        overflow: hidden;
        margin: 5px 0 0;
        li {
            float: left;
            overflow: hidden;
        }
        .sd-check__wrapper {
            margin: 0 5px 5px 0;
        }
    }
}

.placeholder {
    margin: 20px 0;
}