/*------------------------------------*\
    #Card
\*------------------------------------*/

// Default size
@cardWidth: 52px;
@cardHeight: 32px;

.component-payment-card {
  background:url('@{brand-asset-location}globals/assets/images/misc/cards.png') no-repeat;
  width: @cardWidth;
  height: @cardHeight;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  background-size:@cardWidth auto;

  //
  // == Card types ==
  //

  .card-variant(@number) {
    background-position : 0 -@number*@cardHeight;
  }

  &.amazon {.card-variant(0);}
  &.amex {.card-variant(1);}
  &.apple {.card-variant(2);}
  &.cirrus {.card-variant(3);}
  &.delta {.card-variant(4);}
  &.directdebit {.card-variant(5);}
  &.discover {.card-variant(6);}
  &.electron {.card-variant(7);}
  &.google {.card-variant(8);}
  &.maestro {.card-variant(9);}
  &.mastercard {.card-variant(10);}
  &.paym {.card-variant(11);}
  &.paypal {.card-variant(12);}
  &.sage {.card-variant(13);}
  &.sepa {.card-variant(14);}
  &.solo {.card-variant(15);}
  &.switch {.card-variant(16);}
  &.ukash {.card-variant(17);}
  &.visa {.card-variant(18);}
  &.visadebit {.card-variant(19);}
  &.westernunion {.card-variant(20);}
}