@import './variables.scss';

// customize appearance here
$counts-ratio-spacing: 1rem;
$counts-ratio-label-spacing: 0.5rem;
$counts-ratio-delimiter: ' ';


.counts-ratio-box {
    display: flex;
    flex-flow: row nowrap;

    position: relative;
    max-width: 100%;

    font-size: $fontSizeS;
    font-family: $font;
    color: $colorGreyMedium;

    border-bottom: 1px solid $colorGreyExtraLight;
    padding: 10px 0;

    .counts-ratio .counts-ratio__name {
        text-decoration: none;
    }
}

.counts-ratio {
    background-color: $colorBrandLight;
    padding: 10px 20px;
    border-radius: 25px;
    color: $colorLight;
}

.counts-ratio__label {
    font-weight: $fontBold;
    font-family: $font;
    font-size: $fontSizeM;

    margin: $counts-ratio-label-spacing;
}

// used when React prop position = 'left'
.counts-ratio-box--left {
    justify-content: flex-start;
}

// used when React prop position = 'center'
.counts-ratio-box--center {
    justify-content: center;
}

// used when React prop position = 'right'
.counts-ratio-box--right {
    justify-content: flex-end;
}

// adjacent sibling combinator, applies space between counts-ratio elements
.counts-ratio + .counts-ratio {
    margin-left: $counts-ratio-spacing;
}

// apply delimiter after each counts-ratio element when there are two or more, but skipping last one
.counts-ratio::after {
    content: $counts-ratio-delimiter;
}
.counts-ratio:last-child::after {
    content: '';
}