.order-history-list .order-list {
  &-item {
    width: 100%;

    &.order-group-heading {
      background-color: $gray-medium;
    }

    td,
    th {
      padding: .75rem;
      font-size: .875rem;
    }
    th {
      padding-bottom: 0px;
    }
    .split-th {
      padding-bottom: .75rem;
      position: relative;

      .split-super {
        padding-left: 37px;height: 10px;

        &:hover {
          .split-tooltip {
            position: absolute;
            background-color:$gray;
            margin-top: -20px;
            width: 110px;
            color: $white;
            font-weight: normal;
            font-size: 12px;
            padding: 6px 10px;
            display: inline-block;
            margin-left: -60px;
          }
          .arrow-box {
            display: block;
            position: absolute;
            right: 14px;
            margin-top: -50px;
          }
        }
        .arrow-box {
          border: none;
          background: none;
          display: none;

          &:after {
            border-bottom-color:$gray;
            transform: rotate(180deg);
            top: 20px;
            margin-left:-17px;
          }
          &:before {
            border-width: 0px;
          }
        }
      }
      .split-text {
        text-align: left;
        display: inline-block;
      }
    }

    &.title-row {
      background-color: $gray-medium;

      td {
        padding-bottom: 0;
      }
    }

    .order-list-header {
      color: $gray;
      font-weight: 500;
      text-transform: uppercase;
      @include font-size(12px);
    }

    .order-list-amount,
    .order-group-summary-text {
      font-weight: 600;
    }

    &.light-gray-bg + .white-bg {
      border-top: 1px solid $gray-medium;
    }

    &.white-bg + .light-gray-bg {
      border-top: 1px solid $gray-medium;
    }
  }

  &-toggle {
    width: 70px;

    .checkbox {
      top: 3px;
    }
  }

  &-number {
    white-space: nowrap;
    text-align: left;
  }
}

.order-group-summary-text,
.order-group-summary-link {
  border-top: 1px solid $black;
  padding-top: .75rem;
}

// Fix for the loading state opacity
.spinner .order-list-toggle {
  opacity: .5;
}

@include breakpoint(xs) {
  .order-history-list tr {

    .order-list-number {
      border-left: 1px solid $gray-medium;
    }

    .order-list-amount {
      text-align: right;
    }
  }
}