/* FORM SPACING */

// if page's main function is a form, we add extra padding
.form--content {
  @include rem(padding, 20px 0 50px 0);
  overflow: hidden;
}

/* LABELS */

label {

  &.is-invalid,
  &.is-error {
    color: $color__brand--error;
  }
}

/* INPUTS */

.form__input,
.form__select { // .form-control
  @include rem(height, 40px);
  @include rem(max-width, 440px);
  @include rem(padding, 10px 15px);
  display: block;
  width: 100%;
  border: 1px solid $color__brand--light-grey;
  box-sizing: border-box;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

  &:focus {
    border-color: $color__brand--black;
    outline: 0;
  }

  &.ng-dirty.ng-invalid,
  &.is-error {
    border: solid $color__brand--error 1px;
    background-color: $color__brand--error-bg;
  }

  &:required {
    box-shadow: none;
  }

  &.form__input--full {
    max-width: 100%;
  }

  &.form__input--sm {
    max-width: 150px;
  }

  &.form__input--postcode {
    @include rem(margin-bottom, 15px);

    @include media-query-xsmall {
      @include rem(max-width, 125px);
      @include rem(margin-right, 15px);
      width: 100%;
      float: left;
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

.form__input {

  &.ng-dirty.ng-invalid:focus,
  &.is-error:focus {
    border: solid $color__brand--black 1px;
    background-color: $color__brand--white;
  }
}

.form__input--expiry {
  max-width: 60px;
  display: inline-block;
}

.form__input--security {
  max-width: 90px;
  display: inline-block;
}

.form__input--2char {
  @extend .form__input;
  display: inline-block;
  width: 50px;
}

.form__input--4char {
  @extend .form__input;
  @include rem(width, 74px);
  display: inline-block;
}

.form__input--yyyy {
  text-align: center;
}

.form__input--dd,
.form__input--mm {
  @extend .form__input;
  @include rem(width, 60px);
  display: inline-block;
  text-align: center;
}

@if $channel == 'channel-tsop' {

  .form__input--dd,
  .form__input--mm {
    @include rem(width, 70px);
  }

  .form__input--yyyy {
    @include rem(width, 84px);
  }

  .form--content.width-490 {
    @include rem(max-width, 490px);
  }

}

.form__select {
  @include rem(height, 42px);
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;

  &.ng-dirty.ng-invalid:focus,
  &.is-error:focus {
    border: solid $color__brand--black 1px;
    background-color: transparent;
  }
}

.form__select--with-icon {
  @include rem(padding-left, 60px);
  @include rem(padding-right, 34px);
}

.form__select::-ms-expand {
  display: none;
}

.form__select-outer {
  @include rem(max-width, 440px);
  position: relative;

  &.form__select-outer--full {
    max-width: 100%;
  }
}

.form__select-outer::before {
  @extend .icon;
  @extend .icon--arrow-toggle;
  font-size: 14px;
  position: absolute;
  right: 15px;
  bottom: 14px;
  z-index: -1;
}

.ie8 .form__select-outer::before,
.ie9 .form__select-outer::before {
  content: '';
}

.form__checkbox {
  @include rem(margin-right, 10px);
  @include rem(font-size, 16px);
  background-color: $color__brand--white;
}

.form__checkbox--lg {
  @include rem(height, 25px);
  @include rem(width, 25px);
  @include rem(margin-top, 6px);
}

.form__textarea {
  @include rem(padding, 10px 15px);
  display: block;
  border: 1px solid $color__brand--light-grey;
  box-sizing: border-box;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

  &:focus {
    border-color: $color__brand--black;
    outline: 0;
  }

  &.ng-dirty.ng-invalid,
  &.is-error {
    border: solid $color__brand--error 1px;
    background-color: $color__brand--error-bg;
  }

  &.ng-dirty.ng-invalid:focus,
  &.is-error:focus {
    border: solid $color__brand--black 1px;
    background-color: transparent;
  }
}

// scss-lint:disable QualifyingElement
input[type='tel'],
input[type='number'],
input[type='search'] {
  -webkit-appearance: none !important;
  border-radius: 0;
}

/* FORM ITEM */

.form__item {
  @include rem(margin-bottom, 20px);
  &::after {
    @extend %clearfix;
    content: '';
  }
}

/* ENHANCEMENTS */

.form__divider {
  @include rem(padding, 5px);
}

.form__helper {
  @include rem(font-size, 13px);
  @include rem(margin, 7px 0 4px 0);
}

/* LABELS */

.form__label { // .control-label
  @extend %tone--highlight;
  @include rem(padding-bottom, 10px);
  max-width: 100%;
  display: block;
  line-height: .8;
  color: $color__brand--dark-grey;

  &.is-invalid {
    color: $color__brand--error;
  }

  &.form__label--full-height {
    @include rem(padding-top, 2px);
  }

}

.form__label--left {
  @include rem(padding-top, 14px);

  @include media-query-small {
    @include rem(height, 40px);
  }
}

.form__label--required { // .control-label--required
  &::after {
    content: '*';
  }
}

.form__label--light { // .control-label--light
  font-family: $font__mns-london;
}

.form__label--v-align {
  display: flex;
  align-items: baseline;
}

.form__label--checkbox,
.form__label--radio {
  @extend .form__label--light;
  @extend .form__label--v-align;
}

.form__label--inline {
  @include rem(margin-right, 2rem);
  display: inline-block;
}

.form__label--right {
  @include rem(margin-left, .5rem);
}

.required-text {
  &::before {
    content: '*';
  }
}

/* FIELDITEM */

.fielditem--error {
  @include rem(margin-bottom, 12px);
}

.fielditem__lbl--error {
  @include rem(font-size, 13px);
  @include rem(line-height, 20px);
  margin: 0;
  font-family: $font__mns-london--bold;
}

.fielditem__lbl--info {
  @include rem(font-size, 15px);
  color: $color__brand--dark-grey;
  margin-bottom: 0;
}

.fielditem__msg--error {
  @include rem(padding, 10px 20px 7px 20px);
  @include rem(margin-bottom, 18px);
  background-color: $color__brand--error-bg;
  border: 1px solid $color__brand--error;
  position: relative;
}

.fielditem__msg--error::before {
  border-color: transparent;
  border-style: solid;
  border-top-color: $color__brand--error;
  border-width: 8px;
  content: '';
  display: block;
  height: 0;
  left: 15px;
  position: absolute;
  top: 100%;
  width: 0;
}

.fielditem__msg--error::after {
  border-color: transparent;
  border-style: solid;
  border-top-color: $color__brand--error-bg;
  border-width: 7px;
  content: '';
  display: block;
  height: 0;
  left: 15px;
  margin-left: 1px;
  margin-top: -1px;
  position: absolute;
  top: 100%;
  width: 0;
}

.fielditem__msg--info {
  @include rem(padding, 10px 20px);
  margin-bottom: 0;
  background: $color__brand--warning-bg;
  border: 1px solid $color__brand--warning;
  position: relative;

  @include media-query-max-xsmall {
    @include rem(margin-top, 5px);
  }

  &::before {
    @include rem(border-width, 8px);
    @include rem(left, 15px);
    @include rem(top, -17px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: $color__brand--warning;
    content: '';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
  }

  &::after {
    @include rem(border-width, 7px);
    @include rem(left, 15px);
    @include rem(top, -13px);
    @include rem(margin, -1px 0 0 1px);
    border-color: transparent;
    border-style: solid;
    border-bottom-color: $color__brand--warning-bg;
    content: '';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
  }
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

legend {
  @include rem(margin-bottom, 20px);
  @include rem(font-size, 18px);
  font-family: $font__mns-london;
}