@import './config';
@import './CardNumberInput/CardNumberInput';
@import './CVVInput/CVVInput';

.CardForm {
  margin-bottom: $spacer-sm;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  &--Compressed {
    margin-bottom: 0;
  }
}

.CardForm-Buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  & button {
    flex-grow: 1;
    margin-bottom: $spacer-md;

    @include media-up(large) {
      display: inline;
      max-width: 160px;
      margin-left: $spacer-md;
    }
  }
}

.CardForm-Input {
  $inputComponent: &;
  width: 100%;

  &>.Label {
    width: 100%;
  }

  @include media-up(large) {
    display: inline-block;
    width: calc(50% - 8px);
    box-sizing: border-box;

    &>p {
      position: absolute;
    }

    &>.Label {
      width: 100%;
    }

    &--ExpiryDate {
      width: calc(30% - 16px);
    }

    &--CVV {
      width: calc(20% - 8px);
    }

    &--Compressed {
      &>.FormGroup-feedback {
        position: relative;
      }
    }
  }

  &--Compressed {
    margin-bottom: 16px;

    &>.FormGroup-feedback {
      margin-top: 4px;
    }
    
    &#{$inputComponent}--Name {
      width: calc(50% - 8px);
    }
    &#{$inputComponent}--Surname {
      width: calc(50% - 8px);
    }
    &#{$inputComponent}--CardNumber {
      width: 100%
    }
    &#{$inputComponent}--ExpiryDate {
      min-width: 141px;
      max-width: 170px;
      width: 39%;
    }
    &#{$inputComponent}--CVV {
      max-width: 120px;
      width: 29%;
      margin-right: auto;
      margin-left: 16px;
    }
  }
  
}