.Icon {
    --size: var(--icon-size);
    --bgColor: transparent;
    --fgColor: currentColor;
    --lineColor: currentColor;
    --padding: 0px;

    position: relative;

    background: var(--bgColor);
    color: var(--fgColor);

    width: var(--size);
    height: var(--size);

    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
        width: calc(var(--size) - (var(--padding) * 2));
        height: calc(var(--size) - (var(--padding) * 2));
        background-color: var(--lineColor);
    }

    &:not(.styledBackground) {
        &.productRecommendations { --lineColor: var(--color-product-recommendations-line-color); }
        &.naturalSearch { --lineColor: var(--color-natural-search-line-color); }
        &.trendAnalysis { --lineColor: var(--color-trend-analysis-line-color); }
        &.clientTags { --lineColor: var(--color-client-tags-line-color); }
    }

    &.filled {

        --bgColor: var(--color-base);
        border-radius: var(--border-radius);

        --fgColor: #fff;
        --padding: 5px;

        &.styledBackground {
            &.productRecommendations { --bgColor: var(--gradient-product-recommendations); --lineColor: var(--color-product-recommendations-fg); --lineColor: #fff; }
            &.naturalSearch { --bgColor: var(--gradient-natural-search); --lineColor: var(--color-natural-search-fg); --lineColor: #fff; }
            &.trendAnalysis { --bgColor: var(--gradient-trend-analysis); --lineColor: var(--color-trend-analysis-fg); --lineColor: #fff; }
            &.clientTags { --bgColor: var(--gradient-client-tags); --lineColor: var(--color-client-tags-fg); --lineColor: #fff; }
        }

    }

    &.primary {
        --lineColor: var(--color-primary);
    }

    &.primary.invert {
        --bgColor: var(--color-primary);
        --lineColor: #fff;
    }

    &.filled.invert {
        &.productRecommendations { --bgColor: var(--color-product-recommendations-fg); --lineColor: var(--color-product-recommendations-2); }
        &.naturalSearch { --bgColor: var(--color-natural-search-fg); --lineColor: var(--color-natural-search-2); }
        &.trendAnalysis { --bgColor: var(--color-trend-analysis-fg); --lineColor: var(--color-trend-analysis-2); }
        &.clientTags { --bgColor: var(--color-client-tags-fg); --lineColor: var(--color-client-tags-2); }
    }

    &.smaller {
        --size: var(--icon-size-smaller);
    }

    &.small {
        --size: var(--icon-size-small);
    }

    &.big {
        --size: var(--icon-size-big);
    }

    &.bigger {
        --size: var(--icon-size-bigger);
    }

    &.biggest {
        --size: var(--icon-size-biggest);
    }

    &.huge {
        --size: var(--icon-size-huge);
    }

    &.responsive {
        --size: 100%;
    }

    &.dark {
        --fgColor: var(--color-base-faint) !important;
    }

    &.hollow {
        background-color: var(--color-background);
        --fgColor: currentColor;
        border: solid var(--lineColor) 1px;

        &.dark {
            background-color: transparent;
        }
    }

    &.primary {
        --fgColor: var(--color-primary);
    }

    &.faint {
        --fgColor: var(--color-base-faint);
    }

    &.rotate90 > div { transform: rotate(90deg); }
    &.rotate180 > div { transform: rotate(180deg); }
    &.rotate270 > div { transform: rotate(270deg); }

    > .badge {
        position: absolute;
        top: 4px;
        right: 4px;
        width: min-content;
        height: min-content;
        font-size: 7pt;
        line-height: 1em;
        font-weight: 600;
        background: transparent;
        color: currentColor;
    }

    &.filled > .badge {
        top: 0;
        right: 0;

        padding: 2px 5px;
        border-bottom-left-radius: var(--border-radius);
        border-top-right-radius: calc(var(--border-radius) * .9);

        background: white;
        color: black;
        mix-blend-mode: screen;
    }

    .label {
        position: absolute;
        left: 50%;
        top: 100%;
        width: min-content;
        height: min-content;
        font-size: 9pt;
        line-height: 1em;
        font-weight: 400;
        background: transparent;
        color: currentcolor;
        transform: translateX(-50%);
    }
}