.htma-range-icon {
    --range-icon-display: flex;
    --range-icon-size: 18px;
    --range-icon-color: var(--color-btm-dark-blue);

    --icon-mask: none;

    &[data-range="extremely-high"] { --icon-mask: url('/assets/svg/ranges/htma/extremely-high-FG0JJM1.svg'); }
    &[data-range="extremely-low"] { --icon-mask: url('/assets/svg/ranges/htma/extremely-low-dcQHrqH.svg'); }
    &[data-range="very-high"] { --icon-mask: url('/assets/svg/ranges/htma/very-high-udWkEyq.svg'); }
    &[data-range="very-low"] { --icon-mask: url('/assets/svg/ranges/htma/very-low-NGzpAdK.svg'); }
    &[data-range="slightly-high"] { --icon-mask: url('/assets/svg/ranges/htma/slightly-high-3arylOC.svg'); }
    &[data-range="slightly-low"] { --icon-mask: url('/assets/svg/ranges/htma/slightly-low-SuL8op8.svg'); }
    &[data-range="high"] { --icon-mask: url('/assets/svg/ranges/htma/high-z-Khkcd.svg'); }
    &[data-range="low"] { --icon-mask: url('/assets/svg/ranges/htma/low-ijQwIgB.svg'); }
    &[data-range="ideal"] { --icon-mask: url('/assets/svg/ranges/htma/ideal-wmtPJ0B.svg'); }

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 2px;
    font-size: 16px;
    line-height: 1;
    font-family: 'Roboto', sans-serif;

    &:before {
        content: '';
        display: inline-block;
        width: var(--range-icon-size);
        height: var(--range-icon-size);
        background-color: var(--range-icon-color);
        mask: var(--icon-mask) no-repeat center / contain;
    }

    &[data-range-color="true"] {
        &[data-range="extremely-high"] { --range-icon-color: var(--color-longevity-score-red); }
        &[data-range="extremely-low"] { --range-icon-color: var(--color-longevity-score-blue); }
        &[data-range="very-high"] { --range-icon-color: var(--color-longevity-score-yellow); }
        &[data-range="very-low"] { --range-icon-color: var(--color-longevity-score-turcoise); }
        &[data-range="slightly-high"] { --range-icon-color: var(--color-longevity-score-orange); }
        &[data-range="slightly-low"] { --range-icon-color: var(--color-longevity-score-purple); }
        &[data-range="high"] { --range-icon-color: var(--color-longevity-score-red); }
        &[data-range="low"] { --range-icon-color: var(--color-longevity-score-blue); }
        &[data-range="ideal"] { --range-icon-color: var(--color-longevity-score-green); }
    }
}

span.htma-range-icon {
    --range-icon-display: inline-flex;
    vertical-align: middle;
}