/* define InsightFilterControls */

.InsightFilterControls-container {
    display: flex;
    flex-direction: column;
    flex: 0.19;
    justify-content: space-between;
}

.InsightFilterControls-content {
    display: flex;
    flex-direction: column;
    padding: var(--padding-lg);
    gap: var(--padding-2xl);
}

.InsightFilterControls-statusFilters {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
}

.InsightFilterControls-statusFilter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--border-radius-default);
    gap: var(--padding-xs);
    padding: var(--padding-xxs) var(--padding-sm);
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-medium);
    color: var(--text-emphasis);
    cursor: pointer;
}

.InsightFilterControls-statusFilter.active {
    background-color: #e7e1ff;
    border: 1px solid #7564c6;
    color: var(--text-primary-strong);
    text-decoration: none;
}

.InsightFilterControls-liveToggleContainer {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

.InsightFilterControls-liveToggleContent {
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
}

.InsightFilterControls-viewHeading {
    display: block;
    position: relative;
    color: var(--text-emphasis);
    text-transform: uppercase;
    overflow: hidden;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-h6);
}

.InsightFilterControls-viewHeading::after {
    display: inline-block;
    position: absolute;
    content: "";
    height: 1px;
    background: var(--border-default);
    width: 100%;
    top: 50%;
    margin-left: 10px;
}

.InsightFilterControls-priorityFilters {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
}

.InsightFilterControls-priorityLabel {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-medium);
    color: var(--text-default);
}

.InsightFilterControls-priorityCheckboxContainer {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
}

.InsightFilterControls-priorityCheckboxOption {
    display: flex;
    gap: var(--padding-sm);
    align-items: center;
}

/* Because we're using a badge as a label we just need to tweak the position of the checkbox so that it lines up nicely :) */
.InsightFilterControls-priorityCheckboxContainer .custom-control-label::before,
.InsightFilterControls-priorityCheckboxContainer .custom-control-label::after {
    top: 45%;
    transform: translateY(-45%);
}

.InsightFilterControls-priorityBadge {
    text-transform: uppercase;
    background: inherit;
    border: none;
    cursor: pointer;
}

.InsightFilterControls-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border-subtle);
    padding: var(--padding-lg) var(--padding-md);
}

.InsightFilterControls-footerButton {
    display: flex;
    justify-content: center;
    flex: 1;
}