keyrune/sass/_helpers.scss

@use 'sass:math';

/**
 * Sizes */
@each $class, $size in $keyrune_sizes {
    .#{$keyrune_prefix}.#{$keyrune_prefix}-#{$class} {
        font-size: #{$size};
    }
}

/**
 * Fixed width */
.#{$keyrune_prefix}.#{$keyrune_prefix}-fw {
    width: calc(18em / #{math.div($keyrune_font_size, $keyrune_font_size * 0 + 1)});
    text-align: center;
}

/**
 * Force no border */
.#{$keyrune_prefix}.#{$keyrune_prefix}-no-border {
    -webkit-text-stroke: 0;
    text-stroke: 0;
}

/**
 * Icon borders */
.#{$keyrune_prefix}.#{$keyrune_prefix}-border {
    &:after {
        content: "";
        position: absolute;
        left: -0.05em;
        top: 0.0em;
        z-index: -1;
        color: $white;
        font-size: 1.15em;
        background: $white;
        -webkit-text-stroke: 0.05em $white;
        -webkit-background-clip: $keyrune_background_clip;
        -webkit-text-fill-color: $keyrune_text_fill;
    }

    // adding a white version of the symbol for these problem sets,
    // instead of using the generic text-stroke above
    @each $set, $code, $glyph in $border-corrections {
        &.#{$keyrune_prefix}-#{$code}:after { /* #{$set} */
            content: ss-content($glyph);
        }
    }

    // corrections for various duo icons
    // SIS: the regular symbol becomes the border now
    &.#{$keyrune_prefix}-sis {
        &::before {
            content: "\e9b3";
        }
        &::after {
            content: "\e9b2";
        }
    }
    // c16: regular symbol becomes the border
    &.#{$keyrune_prefix}-c16 {
        &::before {
            content: "\e910"; // rarity
        }
        &::after {
            content: "\e9e5"; // new border
        }
    }
    // dft: regular symbol becomes the border
    &.#{$keyrune_prefix}-dft {
        &::before {
            content: "\e9e1"; // rarity
        }
        &::after {
            content: "\e9e0"; // new border
        }
    }
}

/**
 * Dual-layered symbols */
.#{$keyrune_prefix}.#{$keyrune_prefix}-duo {

    // base border styles
    &::after {
        color: #000;
        content: '';
        display: block;
        font-size: 1em;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    & {
        // set default inner to white unless a rarity is declared
        color: #fff;   
    }
    // sets
    @each $code, $glyph in $dual-layered {
        &.#{$keyrune_prefix}-#{$code}::after {
            content: ss-content($glyph);
        }
    }

    // manual corrections
    &.#{$keyrune_prefix}-ncc::before {
        content: "\e98f";
    }
    &.#{$keyrune_prefix}-40k::before {
        content: "\e999";
    }
    &.#{$keyrune_prefix}-dmc::before {
        content: "\e995";
    }
    &.#{$keyrune_prefix}-khc::before {
        content: "\e9c5";
    }
    &.#{$keyrune_prefix}-ltc::before {
        content: "\e9b7";
    }

    // rarity border colors
    &.#{$keyrune_prefix}-common {
        color: #fff;
    }
    &.#{$keyrune_prefix}-uncommon::after,
    &.#{$keyrune_prefix}-rare::after,
    &.#{$keyrune_prefix}-mythic::after {
        color: #000;
    }

}