@import "util";

$image-front-background: image-url('card-front-background.png');
$image-generic-front: image-url('products/generic-front.png');
$image-generic-back: image-url('products/generic-back.png');

$card-face-width: 24.8em;
$card-face-height: 15.6em;
$sprite-front-height: 93.6em;

// *****************************************************************************
// Generic card layout
// *****************************************************************************
.skeuocard.js {

  .face.front {
    background-color: #eee;
    background-image: image-url('products/generic-front.png'), $image-front-background;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .face.back {
    background-color: #eee;
    background-image: image-url('products/generic-back.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .face.valid{
    @include vendor-prefix(box-shadow, 0 0 10px $color-valid);
  }



  /*
  1. If a field (or group) has focus, regardless of whether it's filled, the
     inputs should look like inputs.
  2. Focused inputs within a focused field or group should look focused.
  3. An un-filled field should always look editable.
  4. Filled, valid fields should be flat until hover.
  */

  .cc-field{

    input{
      border: none;
      outline: none;
      background-color: rgba(255, 255, 255, 0.6);
      @include vendor-prefix(border-radius, 0px);
      @include vendor-prefix(box-shadow, inset 1px 1px 1px 1px #ccc);
      @include vendor-prefix(transition, background-color 300ms ease);
    }

    input:focus{
      outline: 3px auto $color-field-glow;
      @include vendor-prefix(box-shadow, none);
    }

    &.filled.valid:not(.focus){
      input{
        @include vendor-prefix(box-shadow, none);
        background-color: transparent;
      }
    }

    &.filled:hover:not(.focus){
      input{
        @include vendor-prefix(box-shadow, inset 1px 1px 1px 1px #ccc);
        background-color: rgba(255, 255, 255, 0.6);
      }
    }

  }

  .face.filled .cc-field.invalid{
    input{
      @include vendor-prefix(box-shadow, inset 0px 0px 2px 1px $color-invalid);
      border: 1px solid $color-invalid;
    }

    input:focus{
      @include vendor-prefix(box-shadow, none);
    }

    /*
    &:after{
      display: inline-block;
      width: 1.575em;
      height: 1.25em;
      content: "";
      background: image-url('error-pointer.png') no-repeat center center;
      background-size: 1.575em 1.25em;
      padding-left: 4px;
    }
    */
  }

  .cc-number{
    position: absolute;
    display: block;
    left: 1.8em;
    top: 8.05em;
    padding: 0.1em;
    input{
      color: #333;
      font-family: $cc-field-family;
      font-size: 1.5em;
      &.group4{ width: 3.2em; }
      &.group5{ width: 3.8em; }
      &.group6{ width: 4.6em; }
      &.group19{ width: 14em; }
    }
    input + input {
      margin-left: 0.4em;
    }
  }

  .cc-exp {
    position: absolute;
    display: block;
    input, .separator {
      margin: 0; padding: 0;
      font-size: 1em;
      font-family: $cc-field-family;
      color: #333;
      text-align: center;
      &.group2{ width: 2em; }
      &.group4{ width: 4em; }
    }
  }

  .cc-name {
    margin: 0; padding: 0;
    position: absolute;
    display: block;
    font-size: 1em;
    font-family: $cc-field-family;
    text-transform: uppercase;
  }

  .cc-cvc {
    margin: 0; padding: 0;
    position: absolute;
    display: block;
    font-size: 1em;
    font-family: $cc-label-family;
  }

  &.unaccepted .cc-number input{
    outline: none;
    @include vendor-prefix(box-shadow, 0 0 10px $color-invalid);
    @include vendor-prefix(transition, box-shadow linear 0.15s);
  }
}

// *****************************************************************************
// Base layout for cards
// This is inherited by card products.
// *****************************************************************************
.skeuocard.card-product {
  .face.front{
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
  }
  .face.back{
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
  }
}

// *****************************************************************************
// Visa product layout
// *****************************************************************************
.skeuocard.product-visa {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/visa-front.png'), $image-front-background;
  }

  .face.back {
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-exp{
    left: 10.9em;
    top: 11.2em;
    width: 5em;
  }

  .cc-name{
    left: 1.8em;
    top: 13em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }

  // This card puts all required information on the back, rather than the front.
  &.issuer-chase-sapphire{
    .face.front{
      background-image: image-url('issuers/visa-chase-sapphire.png');
    }
    .cc-name{
      left: 1.25em;
      top: 8.90em;
      font-family: $cc-label-family;
      letter-spacing: 2px;
    }
    .cc-number{
      left: 1.25em;
      top: 9.6em;
      input{
        font-family: $cc-label-family;
        letter-spacing: 2px;
        font-size: 1.425em;
        &.group4{ width: 2.8em; }
      }
      input + input{
        margin-left: 0.1em;
      }
    }
    .cc-exp{
      left: 3.75em;
      top: 11.5em;
      input, .separator{
        font-family: $cc-label-family;
        &.group2{ width: 1.6em; }
      }
    }
    .cc-cvc{
      top: 6.3em;
      left: 15.25em;
    }

  }

}

// *****************************************************************************
// China UnionPay card layout
// *****************************************************************************
.skeuocard.product-unionpay {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/unionpay-front.png'), $image-front-background;
  }
  .face.back {
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-exp{
    left: 10.9em;
    top: 11.2em;
    width: 5em;
  }

  .cc-name{
    left: 1.8em;
    top: 13em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

// *****************************************************************************
// American Express card layout
// *****************************************************************************
.skeuocard.product-amex {
  @extend .skeuocard.card-product;

  .face.front {
    background-image: image-url('products/amex-front.png'), $image-front-background;
  }
  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 3em;
    top: 8em;
  }

  .cc-name{
    left: 2.5em;
    top: 13.5em;
  }

  .cc-exp{
    left: 2.5em;
    top: 11.5em;
  }

  .cc-cvc{
    left: 21.25em;
    top: 7em;
    width: 3em;
  }
}

// *****************************************************************************
// Diners Club International card layout
// *****************************************************************************
.skeuocard.product-dinersclubintl {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/dinersclubintl-front.png'), $image-front-background;
  }
  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }
  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }
  .cc-name{
    left: 1.8em;
    top: 11.5em;
  }
  .cc-exp{
    left: 17.5em;
    top: 13.5em;
  }
  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

// *****************************************************************************
// Mastercard card layout
// *****************************************************************************
.skeuocard.product-mastercard {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/mastercard-front.png'), $image-front-background;
  }
  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-name{
    left: 2.5em;
    top: 12.2em;
  }

  .cc-exp{
    left: 11.5em;
    top: 10.8em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

// *****************************************************************************
// Maestro card layout
// *****************************************************************************
.skeuocard.product-maestro {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/maestro-front.png'), $image-front-background;
  }
  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-name{
    left: 2.5em;
    top: 12.2em;
  }

  .cc-exp{
    left: 11.5em;
    top: 10.8em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

// *****************************************************************************
// Discover card layout
// *****************************************************************************
.skeuocard.product-discover {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/discover-front.png'), $image-front-background;
  }

  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-name{
    left: 1.55em;
    top: 13.575em;
  }

  .cc-exp{
    left: 13.15em;
    top: 11.61em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

// *****************************************************************************
// JCB card product
// *****************************************************************************
.skeuocard.product-jcb {
  @extend .skeuocard.card-product;

  .face.front{
    background-image: image-url('products/jcb-front.png'), $image-front-background;
  }

  .face.back{
    background-image: image-url('products/visa-back.png'), $image-generic-back;
  }

  .cc-number{
    left: 1.8em;
    top: 8.05em;
  }

  .cc-name{
    left: 1.55em;
    top: 13.575em;
  }

  .cc-exp{
    left: 10.65em;
    top: 11.50em;
  }

  .cc-cvc{
    top: 7.15em;
    left: 18.1em;
    width: 3em;
  }
}

/* Preload face images */
body:after{
    display:none;
    content: image-url('products/visa-back.png') // most use this
             image-url('products/visa-front.png')
             image-url('products/unionpay-front.png')
             image-url('products/amex-front.png')
             image-url('products/discover-front.png')
             image-url('products/mastercard-front.png')
             image-url('products/dinersclubintl-front.png')
             image-url('products/jcb-front.png');
}