@import '../../../stylesheets/_breakpoints.scss';

.chart-facet {
    border-bottom: 1px solid #ffffff33;
    padding-bottom: 20px;
    margin-bottom: 20px;
    &-content {
        grid-column-start: 2;
        grid-column-end: 4;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}
.chart-heading {
    border-bottom: 1px solid #ffffff33;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: var(--spacing);
    @include small {
        flex-direction: column;
    }
}
.chart-bar {
    // position: relative;
    // top: var(--halfSpacing);
}
.chart-control-button {
    display: flex;
    gap: 5px;
    align-items: center;
}

.chart-controls {
    flex: 1;
    .ButtonGroup {
        width: 100%;
        display: flex;
    }
    .Button {
        flex: 1;
    }
}
.chart-controls,
.chart-actions {
    display: flex;
    justify-content: center;
}

.chart-heading-facet {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chart-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
}
