.chart--horiz {
    overflow: hidden;
    list-style-type: none;
    padding: 0;
    max-height: 0;
    transition: max-height 0.5s ease-out;
}
.chart-bar {
    display: flex;
    flex-direction: column;
    user-select: none;
    overflow: hidden;
    max-height: 30px;
    margin-bottom: 8px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    /* background: linear-gradient(to right, #93e1a4, #05db50); */
    background: linear-gradient(to right, #e6e6e6, var(--accent));
    transition: max-height 0.7s ease;
}
.chart-bar:has(div) {
    cursor: pointer;
}
.chart-sub-skill {
    background: linear-gradient(to right, #0000005b, #8c8c8c36);
    color: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: 3px;
}
.chart-label {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 30px; /*has to match with chart-bar*/
    font-weight: bold;
    white-space: nowrap;
    color: black;
}
.chart-percentage {
    color: transparent;
    transition: color 0.1s ease-out;
}
.chart-bar:hover .chart-percentage {
    color: white;
    text-shadow: grey 0px 0px 2px;
}
.chart-header {
    display: flex;
    justify-content: space-between;
    user-select: none;
    cursor: pointer;
    margin: 0;
    padding: 10px;
    background: linear-gradient(to right, #0000001d, transparent);
}
.chart-header i {
    transition: transform 0.3s ease-out;
}