.component-htma-items-table {
    --item-ideal-min-width: 180px;
    --item-value-min-width: 180px;
    --item-trend-min-width: 320px;

    --item-trend-display: flex;
    --mineral-symbol-display: flex;

    --table-row-height: 56px;

    @media (width <= 1280px) {
        --item-trend-min-width: 260px;
    }

    @media (width <= 1180px) {
        --item-trend-min-width: 260px;
        --item-value-min-width: 120px;
    }

    @media (width <= 980px) {
        --item-trend-min-width: 200px;
    }

    @media (width <= 880px) {
        --item-ideal-min-width: 140px;
        --item-value-min-width: 80px;
    }

    @media (width <= 720px) {
        --item-trend-display: none;
    }

    @media (width <= 440px) {
        --item-ideal-min-width: 110px;
        --mineral-symbol-display: none;
        --table-row-height: 42px;
    }

    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    width: 100%;
    gap: 1px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow:
        inset 0 0 0 1px var(--color-da-orange),
        0 0 0 2px var(--color-da-orange)
    ;

    > :first-child {
        border-radius: 16px 16px 0 0;
    }

    > :last-child {
        border-radius: 0 0 16px 16px;
    }

    .htma-table-item {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: start;
        box-shadow: 0 0 0 1px rgba(from #555 r g b / 0.5);

        .item-identity {
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            padding: 0 0 0 16px;
        }

        .item-ideal {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: end;
            padding: 0 16px 0 0;
            min-width: var(--item-ideal-min-width);
            background-color: rgb(from var(--color-da-purple) r g b / 0.1);
        }

        .item-value {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: end;
            padding: 0 16px 0 0;
            min-width: var(--item-value-min-width);
            background-color: rgb(from var(--color-longevity-score-green) r g b / 0.15);
        }

        .item-trend {
            display: var(--item-trend-display);
            flex-direction: row;
            align-items: center;
            justify-content: start;
            padding: 0 0 0 16px;
            min-width: var(--item-trend-min-width);
        }
    }

    .htma-table-header {
        height: 44px;
        background-color: rgba(from #ddd r g b / 0.65);

        .item-identity .item-name,
        .item-ideal,
        .item-value,
        .item-trend {
            font-size: calc(var(--typography-font-size-p) * 0.85);
            line-height: 1;
            font-weight: 700;
            color: rgb(from var(--color-btm-dark-grey) r g b / 0.75);
            font-family: 'Roboto Condensed', sans-serif;
        }
    }

    .htma-table-row {
        height: var(--table-row-height);
        background-color: rgba(from #fff r g b / 0.65);

        .item-identity {
            gap: 12px;

            .htma-symbol-icon {
                --mineral-icon-display: var(--mineral-symbol-display);
            }

            .item-name {
                font-size: var(--typography-font-size-p);
                line-height: 1;
                font-weight: 700;
                color: var(--color-btm-dark-blue);
                font-family: 'Roboto', sans-serif;
            }
        }

        .item-value {
            font-size: calc(var(--typography-font-size-p) * 0.85);
            line-height: 1;
            font-weight: 700;
            color: var(--color-btm-dark-blue);
            font-family: 'Roboto Condensed', sans-serif;
        }

        .item-ideal {
            gap: 6px;

            .ideal-separator {
                width: 18px;
                height: 16px;
                background-color: #0e72de;
                mask: url('/assets/svg/arrow-right-GFL4Bmj.svg') no-repeat center / contain;
            }

            .ideal-label {
                font-size: calc(var(--typography-font-size-p) * 0.85);
                line-height: 1;
                font-weight: 300;
                font-family: 'Roboto Condensed', sans-serif;
            }

            .ideal-value {
                font-size: calc(var(--typography-font-size-p) * 0.85);
                line-height: 1;
                font-weight: 700;
                color: var(--color-btm-dark-blue);
                font-family: 'Roboto Condensed', sans-serif;
            }
        }

        .item-trend {
            gap: 8px;
            font-size: calc(var(--typography-font-size-p) * 0.85);
            line-height: 1;
            font-weight: 500;
            color: var(--color-btm-dark-blue);
            font-family: 'Roboto', sans-serif;

            .htma-range-icon {
                --range-icon-size: 32px;
            }
        }
    }

    .htma-table-row-info {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: start;
        padding: 12px 16px;
        font-size: calc(var(--typography-font-size-p) * 0.85);
        box-shadow: 0 0 0 1px rgba(from #555 r g b / 0.5);
        background-color: rgb(from var(--color-da-purple) r g b / 0.15);
    }
}