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

    position: relative;

    background-color: 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(--fgColor);
    }

    &.filled {
        background-color: var(--color-base-faint);
        border-radius: var(--border-radius);

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

        &.personalizedRecommend { background: var(--gradientPersonalizedRecommend); }
        &.naturalSearch { background: var(--gradientNaturalSearch); }
        &.trendAnalysis { background: var(--gradientTrendAnalysis); }
        &.profileTags { background: var(--gradientProfileTags); }
        &.biteral { background: var(--color-primary); }
    }

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

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

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

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

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

    &.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 2px 3px 5px;
        border-bottom-left-radius: var(--border-radius);

        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%);
    }
}