payment-cion--inline

/*------------------------------------*\
    #PAYMENT-ICON
\*------------------------------------*/

$payment-icon-width:        38px;
$payment-icon-height:       25px;
$payment-icon-count:        4;

.payment-icon {
    position: relative;
    vertical-align: middle;

    &:after {
        position: absolute;
        top: 1px; //TODO: Adjust offset once designs are in.
        right: 4px;
        width:  $payment-icon-width;
        height: $payment-icon-height;
        background: image-url('weblinc/store_front/payment_method_icons.png');
        background-position: -200px 0;
        content: '';
    }
}

.payment-icon--diner-s-club           {}
.payment-icon--test-card              {}
.payment-icon--visa:after             { background-position:      0; }
.payment-icon--mastercard:after       { background-position:  -40px; }
.payment-icon--discover:after         { background-position:  -80px; }
.payment-icon--american-express:after { background-position: -120px; }
.payment-icon--paypal:after           { background-position: -160px; }

.payment-icon--all {
    display: inline-block;
    width: round($payment-icon-width * $payment-icon-count);
    height: $payment-icon-height;
    text-indent: 200%;
    background: image-url('weblinc/store_front/payment_method_icons.png') -200px 0;
    background-position: 0;
    overflow: hidden;

    &:after {
        display: none;
    }
}