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

.dbq-timeline-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: calc(100% - #{$toolbar-height});
    overflow-y: auto; 
    clear: both;
    margin: 0;
    padding: 0;//($padding-default / 2) 0;
    background-color: unset;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: $border-radius-default;
    background-color: $classlist-background;
    box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    -webkit-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    @include scrollbar;

    &[data-is-loading="true"] {
        min-height: (100 + ($padding-default * 2));

        .dbqdcltimeline-loading-view {
            display: block;
        }
    }

    .dbqdcltimeline-loading-view {
        display: none;
    }

    .dbqdcltimeline-error {
        padding: $padding-default;
    }

    .dbqdcltimeline-empty-view {
        color: $text-color-default;
        font-weight: 500;
        font-size: $font-size-base;

        svg {
            fill: $text-color-default;
            width: 30px;
            margin-right: 5px;
        }
    }

    .dbqdcltimeline-items {
        padding: $padding-default;

        .dbqdcltimeline-item-container {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: $padding-default;
            border-radius: $border-radius-default;

            .dbqdcltimeline-dropdown {
                display: none;
                position: absolute;
                top: 5px;
                right: 5px;
                
                .dropdown-toggle {
                    border: 0;
                    outline: 0;
                    padding: 0;
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                    background: $classlist-background;

                    svg {
                        fill: $text-color-default;
                    }

                    &:hover {
                        background: $color-white;
                        color: $color-white;
                        box-shadow: 0 0 5px $color-white;
                        text-shadow: 0 0 5px $color-white;

                        svg {
                            fill: $color-primary !important;
                            transform: scale(1.1);
                        }
                    }
                }
            }

            &:last-of-type {
                .dbqdcltimeline-item {
                    .dbqdcltimeline-item-timeline-padding {
                        //display: none;
                        height: 50%;
                    }
                }
            }

            .dbqdcltimeline-item {
                display: flex;
                flex-direction: row;

                .dbqdcltimeline-item-image {
                    width: 64px;
                    height: 64px;
                    flex-shrink: 0;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 15px;
                    z-index: 1;

                    .dbqdcltimeline-item-user-initials {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        font-weight: 600;
                        font-size: 24px;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .dbqdcltimeline-item-content {
                    position: relative;
                    margin: 8px 0;

                    .dbqdcltimeline-item-text {
                        p {
                            color: $text-color-default;
                            font-size: 13px;
                            font-weight: 500;
                            line-height: 16px;

                            // Remove the margin of the last item in order for the create time to be displayed directly underneath
                            &:last-of-type {
                                margin-bottom: 0;
                            }
                        }
                    }

                    .dbqdcltimeline-item-create-time {
                        color: $color-gray-dark;
                        font-size: 13px;
                        font-weight: 500;
                        margin-top: 2px;
                    }
                }
            }

            &.dbqdcltimeline-item-selected {
                background: $color-layer-3;

                &:hover {
                    background: $color-layer-3;
                }
            }

            &:hover {
                background: $color-layer-1;

                .dbqdcltimeline-dropdown {
                    display: block;
                }
            }
        }

        .dbqdcltimeline-divider-container {
            position: relative;
            display: flex;
            flex-direction: column;

            .dbqdcltimeline-divider {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-bottom: 15px;

                .dbqdcltimeline-divider-bullet {
                    width: 16px;
                    height: 16px;
                    margin-left: 40px;
                    border-radius: 50%;
                    border: 2px solid $color-gray-dark;
                    background: $classlist-background;
                    z-index: 1;
                }

                .dbqdcltimeline-divider-text {
                    background: $color-layer-3;
                    border-radius: $border-radius-default;
                    color: $text-color-default;
                    margin-left: 37px;
                    padding: 5px 10px;
                    z-index: 1;
                }

                .dbqdcltimeline-divider-horizontal-line {
                    position: absolute;
                    top: 15px;
                    width: 100%;
                    height: 1px;
                    //background: $color-gray-dark;
                    background: $color-layer-3;
                    z-index: 0;
                }

                &[data-is-top-divider="true"] {
                    .dbqdcltimeline-item-timeline-padding {
                        top: 8px;
                        height: calc(100% - 8px);
                    }
                }
            }
        }

        // .dbqdcltimeline-item-timeline {
        //     display: none;
        //     margin-left: 47px; // Half of the image size + padding of item
        //     width: 2px;
        //     height: 15px;
        //     background: $color-gray-dark;
        // }

        // The padding is used when an item gets more height, causing the default timeline to be pushed down
        .dbqdcltimeline-item-timeline-padding {
            position: absolute;
            top: 0px;
            left: 47px; // Half of the image size + padding of item
            width: 2px;
            height: 100%;
            background: $color-gray-dark;
            z-index: 0;
        }
    }
}

// Activity logs in a bottom class list may not use the full height, but must have a max height instead.
// This is due to the load-more mechanic. If there is no end to the list, it will load more infinitely.
.document-class-list-control-container {
    .document-class-list-control-content-container {
        &[data-class-list-display-mode="2"],
        &[data-class-list-display-mode="3"],
        &[data-class-list-display-mode="4"] {
            .classlist-window[data-window-index="1"] {
                .dbq-timeline-container {
                    max-height: 1000px;
                }
            }
        }
    }
}

// When the screen is too small, a left/right list will be displayed like a top/bottom list instead.
// In this case we must ensure the max-height is also used even though this is a left/right configured list.
@media only screen and (max-width: 1024px) {
	.document-class-list-control-container {
		.document-class-list-control-content-container {
			&[data-class-list-display-mode="1"],
			&[data-class-list-display-mode="5"] {
                .classlist-window[data-window-index="1"] {
                    .dbq-timeline-container {
                        max-height: 500px;
                    }
                }
			}
		}
	}
}