/**
 * User Account Order Tables and Pages.
 */

// Dashboard and Order History.
.commerce-order-list {}

.commerce-order-listing {
  padding: 0;
  list-style: none;

  > li {
    margin: 10px 0 50px;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

// View all orders link.
.dashboard__view-all-orders {
  display: inline-block;
  margin-bottom: 35px;

  &:after {
    @include fa-icon();
    content: $fa-var-angle-right;
    position: relative;
    display: inline-block;
    margin-left: 5px;
  }
}

// Order Customer Information.
.customer-information {
  display: inline-flex;
  flex-wrap: wrap;
  margin-bottom: 40px;

  > div {
    width: 100%;
    padding: 20px 25px;
    margin: 10px 0;
    border: 1px solid $gray;
    border-radius: 8px;

    @media (min-width: $screen-md-min) {
      width: auto;
      min-width: 250px;
      margin: 10px 20px 10px 0;
    }

    .field__label {
      margin-bottom: 10px;
      font-size: 18px;
    }

    .field__item {
      .address {
        line-height: 1.3;
      }
    }
  }
}

// Order Header.
.order-information__header {
  margin: 0;
  padding: 15px;
  border: 1px solid $gray;
  border-bottom: 0;
  background-color: $gray-light;

  > .field {
    display: flex;
    flex-direction: column-reverse; // To place item before label.
    margin: 0 0 15px;

    &:last-of-type {
      margin: 0;
    }

    @media (min-width: $screen-sm-min) {
      display: inline-flex;
      margin: 0 40px 0 0;

      &:last-of-type {
        margin: 0;
      }
    }

    .field__item {
      font-size: 18px;
      font-weight: bold;
    }
    .field__label {
      font-weight: normal;
      font-size: 13px;
      line-height: 1;
    }
  }
}

// Order Footer.
.order-information__footer {
  padding: 15px;
  border: 1px solid $gray;
  border-top: 0;
  background-color: $gray-light;

  .order-total-line {
    padding: 0;
  }
}

// Order Item Table.
.view-commerce-order-item-table-uhplus {
  position: relative;
  clear: both;
  margin: 0;
  padding: 0;
  text-align: right;

  form {
    // Clearfix.
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
}

// Order Item Table Items.
.commerce-order-item-list {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.commerce-order-item-listing {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid $gray;

  > li {
    position: relative;
    float: none;
    display: block;
    min-height: 130px;
    margin: 0;
    padding: 15px;
    background: none;
    border: 1px solid $gray;
    border-top: none;

    @media (min-width: $screen-xs-min) {
      padding-right: 105px;
    }
    @media (min-width: $screen-lg-min) {
      padding: 15px;
    }
    // Clearfix.
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
}

.commerce-order-item__col {
  float: none;
  display: block;
  margin: 0;
  padding: 0;
  width: auto;

  @media (min-width: $screen-lg-min) {
    float: left;
    padding: 10px 15px;
    width: 30%;
  }

  &.commerce-order-item__col--product {
    padding: 0;
    width: auto;

    @media (min-width: $screen-lg-min) {
      width: 50%;
    }

    // Image.
    .commerce-order-item__product-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;

      a {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100px;
        height: 100px;
        border: 1px solid $gray-light;
        z-index: 1;
        @include button-hide-text();
        @include background-opacity(#fff, 0);

        &:hover,
        &:focus {
          @include background-opacity(#fff, 0.3);
        }
      }
      img {
        max-width: 100%;
        height: auto;
      }
    }
    .commerce-order-item__product-image--placeholder {
      display: block;
      width: 100px;
      height: 100px;
      background: url(../gfx/image-for-pos/image_placeholder.jpg) 0 0 no-repeat;
      background-size: 100%;
    }

    // Title and SKU.
    .commerce-order-item__info-cont {
      position: static;
      margin: 0;
      padding: 0 0 0 120px;
      min-height: 0;

      @media (min-width: $screen-lg-min) {
        position: relative;
        min-height: 100px;
        padding-top: 20px;
      }
      .commerce-order-item__sku {
        font-size: 14px;
      }
    }
  }

  // Unit Price.
  &.commerce-order-item__col--price {
    padding: 0 0 0 120px;
    text-align: left;

    @media (min-width: $screen-lg-min) {
      padding: 20px 15px 0;
      text-align: right;
    }
  }

  // Total Price.
  &.commerce-order-item__col--total-price {
    display: none;
    padding: 0;
    width: auto;
    text-align: left;

    @media (min-width: $screen-xs-min) {
      position: absolute;
      top: 15px;
      right: 15px;
      display: block;
    }
    @media (min-width: $screen-lg-min) {
      position: relative;
      top: 0;
      right: 0;
      display: block;
      padding-top: 20px;
      width: 20%;
      text-align: right;
    }
  }
}

// Quantity.
.commerce-order-item__quantity-cont {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;

  // X marker.
  &:before {
    content: 'X';
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    vertical-align: top;

    @media (min-width: $screen-lg-min) {
      margin: 0 20px;
    }
  }
}
.commerce-order-item__quantity {
  position: relative;
  top: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
}
