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}-dsc,
    &.@{ss-prefix}-hop,
    &.@{ss-prefix}-inr,
    &.@{ss-prefix}-pc2,
    &.@{ss-prefix}-sis,
    &.@{ss-prefix}-van {
        &::before {
            -webkit-text-stroke: 0 !important;
        }

        &:not(.ss-duo) {
            &::after {
                color: #fff;
                content: '';
                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}-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}-hop:after { content: "\e656"; } // Planechase 2009
    &.@{ss-prefix}-inr:after { content: "\e9e3"; } // Innistrad Remastered
    &.@{ss-prefix}-pc2:after { content: "\e659"; } // Planechase 2012
    &.@{ss-prefix}-sis { // SIS: the regular symbol becomes the border now
        &::before {
            content: "\e9b3";
        }
        &::after {
            content: "\e9b2";
        }
    }
    &.@{ss-prefix}-van:after { content: "\e655"; } // Vanguard
}