@import '../shared/formfields.module.scss';

.credit-card {
  @extend %form-field;

  input { width: 100%; }
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: ru(.5);

  border-bottom: $border;
}

.label {
  @extend %label;
}

.line-1 {
  position: relative;
  border-bottom: $border;
}

.line-2 {
  display: flex;
  width: 100%;
}

.col {
  width: 50%;

  &:first-child {
    border-right: $border;
  }
}

.icon-lock {
  width: ru(.75);
  height: ru(.75);
  margin-left: auto;
}

.icon-logo {
  position: absolute;
  top: rem-calc(4);
  right: ru(.5);
  max-width: rem-calc(60);
  height: rem-calc(40);
  pointer-events: none;
}

/* --  state:focus  -- */
.focused {
  @extend %focused;

  .header,
  .col,
  .line-1 { border-color: $focused-border-color; }
}

/* --  state:error  -- */
.hasError {
  @extend %hasError;
}