/*#############################################################################
# CARDS
#############################################################################*/

$card-padding: 30px;

.card {
  background-color: #fff;
  border: 1px solid #E9EAEA;
  margin: 0 0 30px 0;
  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
  // @extend %transition-all;

  .card-header {
    padding: $card-padding $card-padding 0;
    // @extend %transition-all;
    @include pie-clearfix;

    .card-title {
      margin: 0;
      @include float(left);

      &.small {
        font-size: 1.1rem
      }
    }

    .card-icon {
      @include float(right);
    }

    .header-baseline {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  .card-body {
    padding: $card-padding;
    // @extend %transition-all;

    > :last-child {
      margin-bottom: 0;
    }

    &.small {
      font-size: 12.8px;
    }
  }

  // CREDIT OPTION CARD
  &.credit-option {
    cursor: pointer;
    border: none;
    overflow: hidden;
    position: relative;
    @include border-radius(4px);

    .card-body {
      padding: 20px 30px;

      h5 {
        font-size: rem-calc(14px);
        margin: 0;
      }

      h6.credit-option-amount {
        font-size: rem-calc(26px);
        margin: 0;
      }

      p.option-info-line {
        color: $color-secondary;
        font-size: rem-calc(14px);
        margin: 0;

        span {
          display: inline-block;
          padding-right: 12px;
          margin-right: 3px;
          position: relative;

          &::after {
            content: "";
            display: block;
            background-color: $color-secondary-light;
            width: 5px;
            height: 5px;
            position: absolute;
            top: 50%;
            right: 0;
            @include border-radius(100%);
            @include transform(translateY(-50%));
          }

          &:last-child {
            padding: 0;
            margin: 0;

            &::after {
              display: none;
            }
          }
        }
      }
    }

    &::before {
      content: "";
      display: block;
      background-color: $color-secondary-light;
      height: 100%;
      width: 7px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      // @extend %transition-all;
    }

    // HOVER STATE
    &:hover {
      @include box-shadow(-10px 10px 20px 0 rgba(black, 0.1));

      &::before {
        background-color: $color-secondary;
      }
    }

    // SELECTED STATE
    &.selected {
      width: 370px;
      @include border-right-radius(0);
      @include box-shadow(-20px 10px 20px 0 rgba(black, 0.15));

      .card-body {
        padding-right: $card-padding * 2;
      }

      &::before {
        background-color: $color-primary;
      }

      // HOVER STATE
      &:hover {
        @include box-shadow(-20px 10px 20px 0 rgba(black, 0.2));

        &::before {
          background-color: $color-primary-dark;
        }
      }
    }
  }
}