Checkout Forms: Shipping information (Edit, authenticated)

.checkout-form {
  position: relative;
  margin: 15px 0;
  padding-top: 1px;

  .shipping-address {
    margin-bottom: 10px;
  }

  .label {
    margin-bottom: 7px;
  }

  .radio:checked + label:not(.shipping-address__details) {
    font-weight: $font-weight-bold;
  }

  @include breakpoint($breakpoint-md) {
    @include clearfix;

    .shipping-address,
    .form-item {
      @include span(6);

      &:nth-of-type(odd) {
        clear: left;
      }
    }

    .shipping-address {
      width: calc(50% - 20px);
      margin-right: $gutter-width-half;
      margin-bottom: 20px;
      margin-left: $gutter-width-half;
    }

    .form-item--radio,
    .form-item--payment-widget,
    .form-item--paypal-widget {
      width: calc(100% - 20px);
      margin-top: 10px;
      float: none;
      clear: both;
    }

    .form-item--checkbox {
      width: calc(100% - 20px);
      margin-top: 10px;
      clear: both;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .shipping-address,
    .form-item {
      @include span(4);

      &:nth-of-type(odd) {
        clear: none;
      }

      &:nth-of-type(3n+1) {
        clear: left;
      }
    }

    .shipping-address {
      width: calc(33.3333% - 20px);
    }

    .form-item--checkbox {
      width: calc(100% - 20px);
    }

    .form-item--payment-widget,
    .form-item--paypal-widget {
      width: calc(100% - 20px);
      float: left;
    }
  }
}

.checkout-form--payment-information,
.checkout-form--payment-information-repairs {
  @include breakpoint($breakpoint-xl) {
    // Allow the actions to float alongside the payment widget.
    .checkout-form__form-item-group:after {
      content: none;
    }
  }
}

.checkout-form--shipping-method {
  // Changes widths from above into min-widths for long Shipping Method values.
  @include breakpoint($breakpoint-md) {
    .form-item--select {
      width: auto;
      min-width: calc(50% - 20px);
      max-width: 100%;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .form-item--select {
      min-width: calc(33% - 20px);
    }
  }
}

.checkout-form--order-submission {
  .form-item {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  @include breakpoint($breakpoint-xl) {
    text-align: right;
  }
}

.checkout-form--payment-information-repairs {
  .paragraph {
    color: $color-dark;
    font-size: 1.4rem;
    line-height: 1.7rem;
  }

  @include breakpoint($breakpoint-xl) {
    .paragraph {
      font-size: 1.9rem;
      line-height: 2.3rem;
    }
  }
}

// Styles for .checkout-form__step-number, and .checkout-form__step-number--*
// now belong to the form-step component.

.checkout-form__form-item-group {
  .checkout-form--shipping-information-edit-auth & {
    margin-bottom: 30px;
  }

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-left: 40px;
    clear: both;

    .checkout-form--shipping-information-edit-auth & {
      margin-bottom: 10px;
    }
  }
}

// Ensures children have equal height.
.checkout-form__form-item-group--shipping-addresses {
  @include breakpoint($breakpoint-md) {
    display: flex;
    flex-wrap: wrap;
  }
}

.checkout-form__radio-help {
  margin: 0 0 20px;
  padding-left: 30px;

  @include breakpoint($breakpoint-md) {
    padding-left: 40px;
  }
}

.checkout-form__actions {
  margin-top: 20px;

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-right: $gutter-width-half;
    float: right;
  }

  @include breakpoint($breakpoint-xl) {
    margin-right: $gutter-width;

    .checkout-form--payment-information-repairs & {
      margin-top: 10px;
    }

    .checkout-form--order-submission & {
      margin: 0;
    }
  }
}

.checkout-form__review-items {
  color: $color-darkest;
  font-size: 1.4rem;
  line-height: 2.0rem;

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-left: 40px;
    clear: both;
  }
}

.checkout-form__review-item-group {
  margin-bottom: 20px;

  @include breakpoint($breakpoint-md) {
    width: calc(50% - 20px);
    margin-right: $gutter-width-half;
    margin-bottom: 0;
    margin-left: $gutter-width-half;
    float: left;

    &:nth-child(odd) {
      clear: left;
    }
  }

  @include breakpoint($breakpoint-xl) {
    width: calc(33.3333% - 20px);

    &:nth-child(odd) {
      clear: none;
    }
  }
}

.checkout-form__review-label {
  display: block;
  font-weight: $font-weight-bold;

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 10px;
  }
}

.checkout-form__review-item {
  margin: 0;
  word-wrap: break-word;

  .icon {
    margin-right: 5px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 10px;
  }
}