keyrune/src/scss/_sets.scss

// default styles and set symbol definitions
.#{$keyrune-prefix} {

    // base variables
    --ss-base-size: 24px;
    --ss-aspect-ratio: 1;
    --ss-height: var(--ss-base-size);
    --ss-width: calc(var(--ss-aspect-ratio) * var(--ss-base-size));

    // base styles
    background: transparent; // turn this to ss-border when border is enabled
    display: inline-block;
    height: var(--ss-height);
    mask-repeat: no-repeat;
    mask-position: 50% 0;
    position: relative;
    width: var(--ss-width);

    // rarity and inner pseudo-element defaults
    &::before,
    &::after {
        bottom: 0;
        content: '';
        display: none;
        height: 100%;
        mask-position: 50% 0;
        mask-repeat: no-repeat;
        position: absolute;
        top: 0;
        width: 100%;
    }
    &::before {
        background: var(--ss-rarity);
        display: block;
    }
    &::after {
        background: var(--ss-inner);
    }

    // set symbol iteration
    //  i is the border (outermost) layer
    //  i::before is the symbol layer
    //  i::after is the inner white layer
    @each $set, $attributes in $keyrune-sets {
        &-#{$set} {
            @include ratio(map-get($attributes, ratio));
            @include layers($attributes);
        }
        // check for aliases and assign the same glyphs
        @if ($keyrune-include-aliases) {
            @if map-get($keyrune-aliases, $set) {
                @each $alias in map-get($keyrune-aliases, $set) {
                    &-#{$alias} {
                        @include layers($attributes);
                    }
                }
            }
        }
        // check for complete set of aliases in full version
        @if ($keyrune-include-everything) {
            @if map-get($keyrune-aliases-complete, $set) {
                @each $alias in map-get($keyrune-aliases-complete, $set) {
                    &-#{$alias} {
                        @include layers($attributes);
                    }
                }
            }
        }
    }

    // accessory features
    &.#{$keyrune-prefix} {

        // border
        &-border {
            // set the element background as the border color
            background: var(--ss-border);

            // show the ::before pseudo element
            &::before {
                display: inline-block;
            }

            // rarities > common have a black border
            &.#{$keyrune-prefix}-rarity-common-alt,
            &.#{$keyrune-prefix}-rarity-uncommon,
            &.#{$keyrune-prefix}-rarity-rare,
            &.#{$keyrune-prefix}-rarity-mythic,
            &.#{$keyrune-prefix}-rarity-foil,
            &.#{$keyrune-prefix}-border-black {
                background: var(--ss-border-contrast);
            }

            // convenience class to force a white border
            &-white {
                --ss-border: #fff !important;
                --ss-border-contrast: #fff !important;
            }
        }

        // inner (requires advanced positional styles for glyphs taller than they are wide)
        &-inner {
            &::after {
                display: inline-block;
            }
        }

        // rarity colors
        &-rarity {

            // rarity loop
            @each $rarity, $colors in $keyrune-rarities {
                &-#{$rarity} {
                    // set the symbol's color
                    --ss-rarity: #{map.get($colors, solid)};
                    // gradient alternative
                    &.#{$keyrune-prefix}-rarity-gradient {
                        --ss-rarity: linear-gradient(
                            90deg,
                            #{map.get($colors, left)} 0%,
                            #{map.get($colors, center)} 50%,
                            #{map.get($colors, right)} 100%);
                    }
                }
            }

            // special foil case
            &-foil {
                --ss-rarity: #00afc9;
                &.#{$keyrune-prefix}-rarity-gradient {
                    --ss-rarity: linear-gradient(
                        135deg,
                        #ea8d66 0%,
                        #ea8d66 15%,
                        #fdef8a 28%,
                        #8bcc93 42%,
                        #a6dced 55%,
                        #6f75aa 68%,
                        #e599c2 84%,
                        #e599c2 100%);
                }
            }
        }

        //
        // fixed width
        &-fw {
            // set the width to the largest symbole, ARN, at 1.75em
        }

        //
        // uniform width
        // currently this does not support the inner ::marker b/c we need to use inline-flex
        &-uw {

            // set the font size to 2rem and resize icons based on aspect ratio
            align-items: center;
            display: inline-flex;
            height: 1em;
            width: 1em;

            // set the glyphs' font-size based on aspect ratio
            &::before,
            &::after {
                font-size: calc(1em / var(--aspect-ratio));
            }

        }

        //
        // color overrides
        &-white {
            &::before,
            &::after,
            &::marker {
                color: #{map.get($keyrune-colors, "white")};
            }
        }
    }
}