/* Currency Icon Helpers - Easy to use like Font Awesome */

.currency-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.125em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.usd-icon {
    background-image: url('../img/icons/usd-circle.svg');
}

.sc-icon {
    background-image: url('../img/icons/sc-coin.svg');
}

/* Size variations */
.currency-icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.currency-icon-lg {
    width: 1.33em;
    height: 1.33em;
    vertical-align: -0.25em;
}

.currency-icon-2x {
    width: 2em;
    height: 2em;
}

.currency-icon-3x {
    width: 3em;
    height: 3em;
}

/* Color variations */
.usd-icon-green {
    filter: hue-rotate(90deg) saturate(1.5);
}

.sc-icon-gold {
    filter: hue-rotate(30deg) saturate(1.8) brightness(1.1);
}

/* Text alignment helper */
.currency-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}