percentage-chart {
    display: block;
    background: var(--color-brand-dark);
    color: #E2E2E2;
    padding-top: $half-padding;
    padding-bottom: $half-padding;
    max-height: 25%;
    overflow-y: auto;
    @include overflow-scroll(scroll, touch);
}

percentage-chart ul li {
    padding-left: $half-padding;
    padding-right: $half-padding;
    margin: $default-padding;

    will-change: font-weight, color;
    transition: all 0.3s linear;

    progress, progress[value] {
        @include ignore-device-rendering();
        width: 100%;
        height: $half-padding;
    }

    progress[value]::-webkit-progress-bar {
        background-color: var(--color-ui-2);
        border-radius: 10px;
    }

    progress[value]::-webkit-progress-value {
        background-color: var(--color-ui-4);
        border-radius: 10px;

        will-change: box-shadow, background-color;
        transition: all 0.3s cubic-bezier(0.26, -0.04, 0.24, 2.34);
    }
}

percentage-chart ul li[aria-selected=true] {
    font-weight: bold;
    color: white;

    progress[value]::-webkit-progress-value {
        background-color: var(--color-highlight);
        box-shadow: 0px 0px 0px 1px var(--color-highlight);
    }
}

percentage-chart ul li div {
    @include flex();
    @include flex-row();
    align-items: center;
    display: flex; 
    font-size: $rem-3;
}