.lines-group {
  border-bottom: 1px solid $gray;

  &__header {
    cursor: pointer;
    padding-bottom: 20px;
    position: relative;
    overflow: hidden;

    @include media-breakpoint-down(sm) {
      padding-bottom: 15px;
    }
  }

  &__header-text {
    @include heading-5;
    color: $blue;

    @include media-breakpoint-down(md) {
      padding-left: 34px;
    }

    @include media-breakpoint-up(md) {
      position: absolute;
      top: 0;
      left: 34px;
    }

    @include media-breakpoint-only(md) {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &__count {
    display: inline-block;
    line-height: 1.625rem;
    color: $warm-grey;
    font-weight: bold;

    @include media-breakpoint-down(sm) {
      float: right;
      font-weight: 500;
    }

    @include media-breakpoint-only(md) {
      margin-left: 30%;
    }

    @include media-breakpoint-up(lg) {
      @include make-col-offset(2, 9);
    }
  }

  &__content {
    padding-left: 20px;

    @include media-breakpoint-down(sm) {
      padding-left: 0;
    }
  }

  &__header-icon {
    left: 0;
    position: absolute;
    top: 0;
    font-size: 1rem;
    color: $blue;
  }

  &__code {
    @include media-breakpoint-down(sm) {
      margin-top: 10px;
      text-align: right;
    }

    @include media-breakpoint-up(md) {
      float: right;
      clear: both;
    }
  }

  .collapsed {
    .fa-angle-up {
      transform: rotate(180deg);
    }
  }

  & + & {
    margin-top: 20px;
  }
}

.lines-group.insufficient-stock {

  .lines-group__header {
    font-size: 1rem;
    font-weight: bold;

    p {
      margin-bottom: 0;
    }
  }

  .order-line:first-of-type {
    border-top: 0;
  }
}