.htma-symbol-icon {
    --mineral-icon-display: flex;
    --mineral-icon-flex-direction: row;
    --mineral-icon-size: 24px;
    --mineral-icon-font-size: 14px;
    --mineral-icon-font-weight: 700;
    --mineral-shadow-color: rgb(from var(--color-btm-dark-blue) r g b / 0.35);

    --item-width: var(--mineral-icon-size, 24px);
    --item-gap: 4px;

    --color-mineral1: rgb(from var(--color-btm-dark-grey) r g b / 0.5);
    --color-mineral2: rgb(from var(--color-btm-dark-grey) r g b / 0.5);

    --content-mineral1: attr(data-symbol);
    --content-mineral2: 'xx';

    --display-mineral1: flex;
    --display-mineral2: none;

    --mineral-height: var(--mineral-icon-size);

    width: var(--item-width, 24px);
    min-width: var(--item-width, 24px);
    max-width: var(--item-width, 24px);
    height: var(--mineral-height, 24px);
    min-height: var(--mineral-height, 24px);
    max-height: var(--mineral-height, 24px);
    display: var(--mineral-icon-display);
    flex-direction: var(--mineral-icon-flex-direction);
    align-items: center;
    justify-content: center;
    gap: var(--item-gap, 4px);

    &.size-medium {
        --mineral-icon-size: 26px;
        --mineral-icon-font-size: 16px;
    }

    &.size-large {
        --mineral-icon-size: 36px;
        --mineral-icon-font-size: 16px;
    }

    &:before,
    &:after {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-transform: capitalize;
        width: var(--mineral-icon-size);
        min-width: var(--mineral-icon-size);
        max-width: var(--mineral-icon-size);
        height: var(--mineral-icon-size);
        min-height: var(--mineral-icon-size);
        max-height: var(--mineral-icon-size);
        border-radius: 4px;
        font-size: var(--mineral-icon-font-size);
        line-height: 1;
        font-weight: var(--mineral-icon-font-weight);
        color: #fff;
        font-family: 'Roboto Condensed', sans-serif;
        box-shadow: 1px 1px 0 1px var(--mineral-shadow-color);
    }

    &:before {
        display: var(--display-mineral1);
        content: var(--content-mineral1);
        background-color: var(--color-mineral1);
    }

    &:after {
        display: var(--display-mineral2);
        content: var(--content-mineral2);
        background-color: var(--color-mineral2);
    }

    &[data-symbol*="_"] {
        --display-mineral2: flex;
        --item-width: calc(var(--mineral-icon-size) * 2 + var(--item-gap));
    }

    &[data-symbol="mg"], &[data-symbol^="mg_"] { --color-mineral1: #f97a1b; --content-mineral1: 'mg'; }
    &[data-symbol="ca"], &[data-symbol^="ca_"] { --color-mineral1: #f97a1b; --content-mineral1: 'ca'; }
    &[data-symbol="na"], &[data-symbol^="na_"] { --color-mineral1: #e73a1c; --content-mineral1: 'na'; }
    &[data-symbol="k"], &[data-symbol^="k_"] { --color-mineral1: #e73a1c; --content-mineral1: 'k'; }
    &[data-symbol="zn"], &[data-symbol^="zn_"] { --color-mineral1: #1b74c6; --content-mineral1: 'zn'; }
    &[data-symbol="p"], &[data-symbol^="p_"] { --color-mineral1: #5ead1c; --content-mineral1: 'p'; }
    &[data-symbol="fe"], &[data-symbol^="fe_"] { --color-mineral1: #1b74c6; --content-mineral1: 'fe'; }
    &[data-symbol="mn"], &[data-symbol^="mn_"] { --color-mineral1: #1b74c6; --content-mineral1: 'mn'; }
    &[data-symbol="cr"], &[data-symbol^="cr_"] { --color-mineral1: #1b74c6; --content-mineral1: 'cr'; }
    &[data-symbol="se"], &[data-symbol^="se_"] { --color-mineral1: #5ead1c; --content-mineral1: 'se'; }
    &[data-symbol="b"], &[data-symbol^="b_"] { --color-mineral1: #b07825; --content-mineral1: 'b'; }
    &[data-symbol="co"], &[data-symbol^="co_"] { --color-mineral1: #1b74c6; --content-mineral1: 'co'; }
    &[data-symbol="mo"], &[data-symbol^="mo_"] { --color-mineral1: #1b74c6; --content-mineral1: 'mo'; }
    &[data-symbol="s"], &[data-symbol^="s_"] { --color-mineral1: #5ead1c; --content-mineral1: 's'; }
    &[data-symbol="cu"], &[data-symbol^="cu_"] { --color-mineral1: #1b74c6; --content-mineral1: 'cu'; }

    &[data-symbol="hg"], &[data-symbol^="hg_"] { --color-mineral1: #1b74c6; --content-mineral1: 'hg'; }
    &[data-symbol="al"], &[data-symbol^="al_"] { --color-mineral1: #415e80; --content-mineral1: 'al'; }
    &[data-symbol="sb"], &[data-symbol^="sb_"] { --color-mineral1: #b07825; --content-mineral1: 'sb'; }
    &[data-symbol="u"], &[data-symbol^="u_"] { --color-mineral1: #cc47a2; --content-mineral1: 'u'; }
    &[data-symbol="as"], &[data-symbol^="as_"] { --color-mineral1: #b07825; --content-mineral1: 'as'; }
    &[data-symbol="be"], &[data-symbol^="be_"] { --color-mineral1: #f97a1b; --content-mineral1: 'be'; }
    &[data-symbol="cd"], &[data-symbol^="cd_"] { --color-mineral1: #1b74c6; --content-mineral1: 'cd'; }
    &[data-symbol="pb"], &[data-symbol^="pb_"] { --color-mineral1: #415e80; --content-mineral1: 'pb'; }

    &[data-symbol="ge"], &[data-symbol^="ge_"] { --color-mineral1: #b07825; --content-mineral1: 'ge'; }
    &[data-symbol="ba"], &[data-symbol^="ba_"] { --color-mineral1: #f97a1b; --content-mineral1: 'ba'; }
    &[data-symbol="bi"], &[data-symbol^="bi_"] { --color-mineral1: #415e80; --content-mineral1: 'bi'; }
    &[data-symbol="rb"], &[data-symbol^="rb_"] { --color-mineral1: #e73a1c; --content-mineral1: 'rb'; }
    &[data-symbol="li"], &[data-symbol^="li_"] { --color-mineral1: #e73a1c; --content-mineral1: 'li'; }
    &[data-symbol="ni"], &[data-symbol^="ni_"] { --color-mineral1: #1b74c6; --content-mineral1: 'ni'; }
    &[data-symbol="pt"], &[data-symbol^="pt_"] { --color-mineral1: #1b74c6; --content-mineral1: 'pt'; }
    &[data-symbol="tl"], &[data-symbol^="tl_"] { --color-mineral1: #415e80; --content-mineral1: 'tl'; }
    &[data-symbol="v"], &[data-symbol^="v_"] { --color-mineral1: #1b74c6; --content-mineral1: 'v'; }
    &[data-symbol="sr"], &[data-symbol^="sr_"] { --color-mineral1: #f97a1b; --content-mineral1: 'sr'; }
    &[data-symbol="sn"], &[data-symbol^="sn_"] { --color-mineral1: #415e80; --content-mineral1: 'sn'; }
    &[data-symbol="ti"], &[data-symbol^="ti_"] { --color-mineral1: #1b74c6; --content-mineral1: 'ti'; }
    &[data-symbol="w"], &[data-symbol^="w_"] { --color-mineral1: #1b74c6; --content-mineral1: 'w'; }
    &[data-symbol="zr"], &[data-symbol^="zr_"] { --color-mineral1: #1b74c6; --content-mineral1: 'zr'; }



    &[data-symbol="ca_p"] { --color-mineral2: #5ead1c; --content-mineral2: 'p'; }
    &[data-symbol="na_k"] { --color-mineral2: #e73a1c; --content-mineral2: 'k'; }
    &[data-symbol="ca_k"] { --color-mineral2: #e73a1c; --content-mineral2: 'k'; }
    &[data-symbol="zn_cu"] { --color-mineral2: #1b74c6; --content-mineral2: 'cu'; }
    &[data-symbol="na_mg"] { --color-mineral2: #f97a1b; --content-mineral2: 'mg'; }
    &[data-symbol="ca_mg"] { --color-mineral2: #f97a1b; --content-mineral2: 'mg'; }
    &[data-symbol="fe_cu"] { --color-mineral2: #1b74c6; --content-mineral2: 'cu'; }
    &[data-symbol="ca_pb"] { --color-mineral2: #415e80; --content-mineral2: 'pb'; }
    &[data-symbol="fe_pb"] { --color-mineral2: #415e80; --content-mineral2: 'pb'; }
    &[data-symbol="fe_hg"] { --color-mineral2: #1b74c6; --content-mineral2: 'hg'; }
    &[data-symbol="se_hg"] { --color-mineral2: #1b74c6; --content-mineral2: 'hg'; }
    &[data-symbol="zn_cd"] { --color-mineral2: #1b74c6; --content-mineral2: 'cd'; }
    &[data-symbol="zn_hg"] { --color-mineral2: #1b74c6; --content-mineral2: 'hg'; }
    &[data-symbol="s_hg"] { --color-mineral2: #1b74c6; --content-mineral2: 'hg'; }
    &[data-symbol="s_cd"] { --color-mineral2: #1b74c6; --content-mineral2: 'cd'; }
    &[data-symbol="s_pb"] { --color-mineral2: #415e80; --content-mineral2: 'pb'; }
    &[data-symbol="ca_sr"] { --color-mineral2: #f97a1b; --content-mineral2: 'sr'; }
    &[data-symbol="cr_v"] { --color-mineral2: #1b74c6; --content-mineral2: 'v'; }
    &[data-symbol="cu_mo"] { --color-mineral2: #1b74c6; --content-mineral2: 'mo'; }
    &[data-symbol="fe_co"] { --color-mineral2: #1b74c6; --content-mineral2: 'co'; }
    &[data-symbol="k_co"] { --color-mineral2: #1b74c6; --content-mineral2: 'co'; }
    &[data-symbol="k_li"] { --color-mineral2: #e73a1c; --content-mineral2: 'li'; }
    &[data-symbol="mg_b"] { --color-mineral2: #b07825; --content-mineral2: 'b'; }
    &[data-symbol="s_cu"] { --color-mineral2: #1b74c6; --content-mineral2: 'cu'; }
    &[data-symbol="se_tl"] { --color-mineral2: #415e80; --content-mineral2: 'tl'; }
    &[data-symbol="se_sn"] { --color-mineral2: #415e80; --content-mineral2: 'sn'; }
    &[data-symbol="zn_sn"] { --color-mineral2: #415e80; --content-mineral2: 'sn'; }
}

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