keyrune/less/border.less

/**
 * 
 * Border layer using ::after as well
 * 
 * Symbols cannot have both .duo and .border applied as both 
 * make use of the same pseudoelement in v3.
 * 
 * For duo icons that have an inner white layer as well as a 
 * border layer, we need to use all 3 available pseudoelements.
 */

.@{ss-prefix}-border {
    &::before {
        paint-order: stroke fill;
        -webkit-text-stroke: 0.1em #000;
    }

    &.@{ss-prefix}-common::before {
        -webkit-text-stroke: 0.1em #fff;
    }

    /**
     * specific border glyphs for these sets, handled via ::after
     */
    &.@{ss-prefix}-40k,
    &.@{ss-prefix}-arc,
    &.@{ss-prefix}-c13,
    &.@{ss-prefix}-c14,
    &.@{ss-prefix}-c15,
    &.@{ss-prefix}-c16,
    &.@{ss-prefix}-cm1,
    &.@{ss-prefix}-cmd,
    &.@{ss-prefix}-cns,
    &.@{ss-prefix}-dft,
    &.@{ss-prefix}-dmc,
    &.@{ss-prefix}-drc,
    &.@{ss-prefix}-dsc,
    &.@{ss-prefix}-ecc,
    &.@{ss-prefix}-ecl,
    &.@{ss-prefix}-eos,
    &.@{ss-prefix}-fin,
    &.@{ss-prefix}-hop,
    &.@{ss-prefix}-inr,
    &.@{ss-prefix}-om1,
    &.@{ss-prefix}-omb,
    &.@{ss-prefix}-pc2,
    &.@{ss-prefix}-pza,
    &.@{ss-prefix}-sis,
    &.@{ss-prefix}-tce,
    &.@{ss-prefix}-tdm,
    &.@{ss-prefix}-tla,
    &.@{ss-prefix}-tle,
    &.@{ss-prefix}-tmc,
    &.@{ss-prefix}-tmt,
    &.@{ss-prefix}-van {
        &::before {
            -webkit-text-stroke: 0 !important;
        }

        &:not(.ss-duo) {
            &::after {
                color: #fff;
                display: block;
                font-size: 1em;
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }

            // all non-common rarities get a black border
            &.@{ss-prefix}-uncommon::after,
            &.@{ss-prefix}-rare::after,
            &.@{ss-prefix}-mythic::after,
            &.@{ss-prefix}-timeshifted::after,
            &.@{ss-prefix}-foil::after {
                color: #000;
            }
        }
    }

    // glyphs per set
    //
    &.@{ss-prefix}-40k { // experimental ::marker for 3 layer icons
        display: list-item;
        list-style-position: inside;

        &::before {
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker {
            content: "\e99a";
            color: #000;
        }
    }
    &.@{ss-prefix}-arc:after { content: "\e657"; } // Archenemy
    &.@{ss-prefix}-c13:after { content: "\e65b"; } // Commander 2013
    &.@{ss-prefix}-c14:after { content: "\e65d"; } // Commander 2014
    &.@{ss-prefix}-c15:after { content: "\e900"; } // Commander 2015
    &.@{ss-prefix}-c16 { // c16: regular symbol becomes the border
        &::before {
            content: "\e910"; // rarity
        }
        &::after {
            content: "\e9e5"; // new border
        }
    }
    &.@{ss-prefix}-cm1:after { content: "\e65a"; } // Commander's Arsenal
    &.@{ss-prefix}-cmd:after { content: "\e658"; } // Commander
    &.@{ss-prefix}-cns:after { content: "\e65c"; } // Conspiracy
    &.@{ss-prefix}-dft { // dft: regular symbol becomes the border
        &::before {
            content: "\e9e1"; // rarity
        }
        &::after {
            content: "\e9e0"; // new border
        }
    }
    &.@{ss-prefix}-dmc { 
        display: list-item;
        list-style-position: inside;

        &::before {
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker {
            content: "\e996";
            color: #000;
        }
    }
    &.@{ss-prefix}-drc { 
        display: list-item;
        list-style-position: inside;

        &::before {
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker {
            content: "\e9ea";
            color: #000;
        }
    }
    &.@{ss-prefix}-dsc { // experimental ::marker for 3 layer icons
        display: list-item;
        list-style-position: inside;

        &.@{ss-prefix}-fw {
            text-align: revert !important; // not sure why we have to remove center
        }

        &::before {
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker {
            content: "\e9dd";
            color: #000;
        }
    }
    &.@{ss-prefix}-ecc { // 3 layers, rarity glyph changes here as well
        display: list-item;
        list-style-position: inside;

        &.@{ss-prefix}-fw {
            text-align: revert !important; // not sure why we have to remove center
        }

        &::before { // new rarity
            content: "\ea12";
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker { // border
            content: "\ea13";
            color: #000;
        }
        // ::after is in duo
    }
    &.@{ss-prefix}-ecl:after { content: "\ea05"; } // Lorwyn Eclipsed
    &.@{ss-prefix}-eos { // regular symbol becomes the border
        &::before {
            content: "\e9ff"; // rarity
        }
        &::after {
            content: "\ea00"; // new border
        }
    }
    &.@{ss-prefix}-fin { // fin needs a new rarity for the border glyph
        &::before {
            content: "\e9ee"; // rarity
        }
        &::after {
            content: "\e9ef"; // border
        }
    }
    &.@{ss-prefix}-hop:after { content: "\e656"; } // Planechase 2009
    &.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
    &.@{ss-prefix}-om1 { // rarity becomes the border
        &::before {
            content: "\ea0d"; // rarity (old border)
        }
        &::after {
            content: "\ea0e"; // border
        }
    }
    &.@{ss-prefix}-omb { // rarity becomes the border
        &::before {
            content: "\ea0f"; // rarity (old border)
        }
        &::after {
            content: "\ea10"; // border
        }
    }
    &.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012
    &.@{ss-prefix}-pza:after { content: "\ea09"; } // TMT Source Material
    &.@{ss-prefix}-sis { // SIS: the regular symbol becomes the border now
        &::before {
            content: "\e9b3";
        }
        &::after {
            content: "\e9b2";
        }
    }
    &.@{ss-prefix}-tdm:after { content: "\e9ec"; } // Tarkir Dragonstorm
    &.@{ss-prefix}-tla { // experimental ::marker for 3 layer icons
        display: list-item;
        list-style-position: inside;

        &::before {
            position: absolute;
            left: 50%;
            top: 0;
            translate: -50%;
        }
        &.@{ss-prefix}-fw {
            text-align: revert !important; // not sure why we have to remove center

            &::before {
                left: 0;
                translate: 0;
            }
        }
        &::marker { // border
            content: "\e9fd";
            color: #000;
        }
    }
    &.@{ss-prefix}-tle { // rarity gets a new glyph; using marker because inner duo
        display: list-item;
        list-style-position: inside;

        &.@{ss-prefix}-fw {
            text-align: revert !important; // not sure why we have to remove center
        }

        &::before { // new rarity
            content: "\ea0a";
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker { // border
            content: "\ea0b";
            color: #000;
        }
        // ::after is in duo
    }
    &.@{ss-prefix}-tmc:after { content: "\ea16"; } // TMT Eternal-Legal
    &.@{ss-prefix}-tmt { // 3 layers
        display: list-item;
        list-style-position: inside;

        &.@{ss-prefix}-fw {
            text-align: revert !important;
        }

        &::before {
            position: absolute;
            left: 0;
            top: 0;
        }
        &::marker { // border
            content: "\ea07";
            color: #000;
        }
        // ::after is in duo as inner
    }
    &.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard
}