mana/sass/_cost.scss

/**
 * Mana cost styles */

.#{$ms-prefix}-cost {

    // Base cost styles
    background-color: #BEB9B2;
    border-radius: 1em;
    color: #111;
    font-size: 0.95em;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.35em;
    text-align: center;

    // Single symbols
    &.#{$ms-prefix}-w,
    &.#{$ms-prefix}-wp {
        background-color: #F0F2C0;
    }
    &.#{$ms-prefix}-u,
    &.#{$ms-prefix}-up {
        background-color: #B5CDE3;
    }
    &.#{$ms-prefix}-b,
    &.#{$ms-prefix}-bp {
        background-color: #ACA29A;
    }
    &.#{$ms-prefix}-r,
    &.#{$ms-prefix}-rp {
        background-color: #DB8664;
    }
    &.#{$ms-prefix}-g,
    &.#{$ms-prefix}-gp {
        background-color: #93B483;
    }

    // Split symbols
    &.#{$ms-prefix}-wu {
        background: #edf2b0; // Old browsers
        background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#a6c1dd), color-stop(100%,#a6c1dd)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // IE10+
        background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#a6c1dd',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-wb {
        background: #edf2b0; // Old browsers
        background: -moz-linear-gradient(-45deg,  #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // IE10+
        background: linear-gradient(135deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-ub {
        background: #a6c1dd; // Old browsers
        background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // IE10+
        background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-ur {
        background: #a6c1dd; // Old browsers
        background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // IE10+
        background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-br {
        background: #aca29a; // Old browsers
        background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // IE10+
        background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-bg {
        background: #aca29a; // Old browsers
        background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // IE10+
        background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-rw {
        background: #db8664; // Old browsers
        background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
        background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-rg {
        background: #db8664; // Old browsers
        background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // IE10+
        background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-gw {
        background: #93b483; // Old browsers
        background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
        background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-gu {
        background: #93b483; // Old browsers
        background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
        background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-2w {
        background: #beb9b2; // Old browsers
        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-2u {
        background: #beb9b2; // Old browsers
        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-2b {
        background: #beb9b2; // Old browsers
        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // IE10+
        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-2r {
        background: #beb9b2; // Old browsers
        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // IE10+
        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }
    &.#{$ms-prefix}-2g {
        background: #beb9b2; // Old browsers
        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // IE10+
        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // W3C
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
    }

    // Phyrexian mana and size increases
    &.#{$ms-prefix}-p:before,
    &.#{$ms-prefix}-wp:before,
    &.#{$ms-prefix}-up:before,
    &.#{$ms-prefix}-bp:before,
    &.#{$ms-prefix}-rp:before,
    &.#{$ms-prefix}-gp:before {
        display: inline-block;
        -moz-transform: scale( 1.2, 1.2 );
        -webkit-transform: scale( 1.2, 1.2 );
        transform: scale( 1.2, 1.2 );
    }

    // Alternate tap
    &.#{$ms-prefix}-tap-alt:before {
        display: inline-block;
        -moz-transform: scale( 1.2, 1.2 );
        -webkit-transform: scale( 1.2, 1.2 );
        transform: scale( 1.2, 1.2 );
        padding-left: .06em;
        padding-bottom: 0.10em;
    }

    // Snow mana
    &.#{$ms-prefix}-s:before {
        color: #fff;
        -webkit-text-stroke: 2px #fff;
        font-size: 0.85em;
        top: -0.05em;
        position: relative;
        display: inline-block;
    }
    &.#{$ms-prefix}-s:after {
        //text-shadow: -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff;
        content: "\e619";
        position: absolute;
        color: #333;
        margin-left: -0.9em;
        font-size: 1.1em;
    }

    // Tap symbols
    &.#{$ms-prefix}-untap {
        background-color: #111;
        color: #fff;
    }

    // Shadow
    &.#{$ms-prefix}-shadow {
        box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111;
        &.#{$ms-prefix}-untap {
            box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
        }
    }
}


/**
 * Split costs */

.#{$ms-prefix}-split {
    position: relative;
    width: 1.3em;
    height: 1.3em;
}
.#{$ms-prefix}-split:before,
.#{$ms-prefix}-split:after {
    font-size: 0.55em !important;
    position: absolute;
}
.#{$ms-prefix}-split:before {
    top: -0.38em;
    left: 0.28em;
}
.#{$ms-prefix}-split:after {
    top: 0.5em;
    left: 1.0em;
}


/**
 * Half costs */

.#{$ms-prefix}-half {
    width: .675em;
    overflow: hidden;
    display: inline-block;
    margin-left: .675em;

    > .#{$ms-prefix}-cost {
        margin-left: -.675em;
    }
}

/**
 * Un-set costs */

.#{$ms-prefix}-100 {
    width: 2.4em;
}
.#{$ms-prefix}-1000000 {
    width: 5.4em;
}