/* define InsightPreviewContainer */

/* stylelint-disable-next-line plugin/selector-bem-pattern -- shared throughout the tree to keep it in sync */
.InsightPreviewContainer-container {
    --insight-preview-card-height: 109px;

    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-default);
    flex: 0.29;
    min-height: 0;
    min-width: 0;
}

.InsightPreviewContainer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 2.8rem;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--padding-xxs) var(--padding-sm);
    background: var(--surface-subtle-dark);
}

.InsightPreviewContainer-headerButton {
    color: var(--text-primary);
}

.InsightPreviewContainer-content {
    overflow-y: auto;
}

.InsightPreviewContainer-content.no-insights {
    height: 100%;
    display: flex;
}

.InsightPreviewContainer-dismiss {
    display: flex;
    align-items: center;
}

.InsightPreviewContainer-timeGroup {
    display: flex;
    flex-direction: column;
}

.InsightPreviewContainer-timeGroupHeading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-subtle-light);
    padding: 0 var(--padding-sm);
    border-top: 1px solid var(--border-subtle);
}

.InsightPreviewContainer-timeGroupLabel {
    color: var(--text-default);
    font-weight: var(--font-weight-bold);
    padding: var(--padding-xs) 0;
}

.InsightPreviewContainer-timeGroupButton {
    background: inherit;
    border: none;
}

.InsightPreviewContainer-cardWrapper {
    height: var(--insight-preview-card-height);
    overflow: hidden;
}

.InsightPreviewContainer-cardSlide-leave-active {
    transition:
        height 0.25s ease,
        opacity 0.2s ease;
}

.InsightPreviewContainer-cardSlide-leave-to {
    height: 0;
    opacity: 0;
}