.order-line {
  padding: 20px 0;
  border-top: 1px solid $gray;

  &__img {
    text-align: right;

    img {
      display: block;
      margin: 0 auto;
      max-width: 120px;
      max-height: 90px;
    }
  }

  &__delivery {
    @include make-row;
    position: relative;
    margin-top: 20px;

    &.order-line__delivery_static {
      &::before {
        display: none;
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 15px;
      right: 15px;
      border-top: 1px solid $gray-light;
    }

    &-lbl {
      @include make-col-ready;
      @include make-col(12);
      padding-top: 15px;
    }

    &-selection {
      @include make-col-ready;
      padding-top: 15px;
    }

    &-collect {
      @include make-col-ready;
      @include make-col(12);
      position: relative;
      padding-top: 15px;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        border-top: 1px solid $gray-light;
      }
    }

    &-store {
      @include make-col-ready;
      padding-top: 15px;
      text-align: right;
    }

    &-store-name {
      line-height: 1.5rem;
    }

    &-action {
      line-height: 1.5rem;
      font-weight: 500;

      &.btn-change-store {
        float: right;
      }
    }

    &_dynamic {
      background: $gray-bg;
      margin: 20px -15px -20px;
      padding-bottom: 15px;

      &::before {
        bottom: -1px;
        left: 0;
        top: auto;
        right: 0;
        border-top: 1px solid $gray;
      }

      &-store {
        text-align: left;
      }

      .btn-change-store {
        float: none;
        white-space: nowrap;
      }

      .order-line__delivery-store-name {
        display: inline;
        font-weight: 500;
        margin-right: 4px;
      }
    }
  }

  &__title {
    @include heading-5;
    display: inline-block;
    margin-bottom: 16px;
    text-decoration: none;

    &_link {
      @include link-primary;
    }
  }

  &__code {
    margin-bottom: 15px;
    white-space: nowrap;
  }

  &__promo {
    @include additional-text;
    clear: both;
    color: $red;
    font-weight: 500;

    &.potential-promo {
      margin-top: 10px;
    }
  }

  &__type {
    margin-bottom: 0;
  }

  &__calc {
    .tbx_quantity {
      margin-top: -7px;
      margin-bottom: -7px;
    }

    &.area-total {
      white-space: nowrap;
    }
  }

  &__lbl {
    display: inline-block;
    vertical-align: top;
    color: $warm-grey;
    font-weight: bold;
  }

  &__value {
    display: inline-block;
    vertical-align: top;

    &_price {
      font-weight: 500;
    }

    &_wst {
      padding-top: 10px;
    }

    &_note {
      font-size: .75rem;
    }

    &_sum {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5rem;
      color: $blue-dark;
      margin-top: -2px;
    }
  }

  &__action {
    float: right;
  }

  &__update {
    font-weight: 500;
  }

  &__delete {
    transform: translateY(-2px);
    font-size: 1rem;
  }

  &_delivery-error {
    [data-collect] {
      outline: 2px solid $red;
    }
  }

  &__calculator-notification {
    margin-top: 15px;

    .notification {
      padding-right: 20px;
    }

    .notification_success {
      font-weight: 400;
    }
  }

  &_charity {
    display: none;
    border-top: 0;

    .order-line {
      &__calc_quant,
      &__delivery_dynamic {
        display: none;
      }

      &__img-static img {
        padding: 12px;
      }

      &__info {
        padding-top: 12px;
      }
    }

    &_show {
      display: block;
    }
  }
}

.data-collect-hidden {
  display: none;
}

@include media-breakpoint-down(sm) {
  .order-line {
    &__img {
      float: left;
      width: calc(50% - 25px);
      margin-bottom: 15px;
    }

    &__info {
      padding-left: 0;
    }

    &__calcs {
      clear: both;
    }

    &__delivery {
      &-selection {
        @include make-col(6);
        white-space: nowrap;
      }

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

      &-store {
        @include make-col(6);
        padding-top: 59px; // 15px + 24px + 20px
        padding-left: 0;
      }

      &-store-name {
        display: block;
      }

      &-find {
        padding-right: 20px;
      }

      &_dynamic {
        &-selection,
        &-store {
          @include make-col(12);
        }

        &-store {
          font-size: .875rem;
          padding: 10px 0 0 50px;
        }
      }
    }

    &__title {
      @include additional-text;
      display: block;
      margin-left: calc(50% - 10px);
      margin-bottom: 10px;
      font-weight: bold;
    }

    &__code {
      margin-left: calc(50% - 10px);
    }

    &__promo {
      margin: 10px 0 15px calc(50% - 10px);
      clear: none;

      &.potential-promo {
        margin-left: 0;
      }
    }

    &__location {
      position: relative;
      clear: both;
    }

    &__type {
      margin-bottom: .5rem;
    }

    &__calc {
      & + & {
        margin-top: 5px;

        .order-line_dynamic & {
          margin-top: 20px;
        }
      }
    }

    &__lbl {
      width: calc(50% - 25px);
      margin-right: 15px;
      float: left;
    }

    &__value {
      &_sum {
        font-size: 1rem;
      }
    }

    &__action {
      padding-right: 20px;
      text-align: right;
    }
  }
}

@include media-breakpoint-only(md) {
  .order-line {
    &__img {
      .order-line_shrink & {
        @include make-col(3, 8);
      }
    }

    &__info {
      .order-line_shrink & {
        @include make-col(5, 8);
      }
    }

    &__calcs {
      .order-line_shrink & {
        @include make-col(5, 8);
        @include make-col-offset(3, 8);
        margin-top: 10px;
      }
    }

    &__delivery {
      &-selection {
        @include make-col(7, 10);
      }

      &-collect {
        @include make-col(5, 8);
        @include make-col-offset(3, 8);
      }

      &-store {
        @include make-col(3, 10);
      }

      &_dynamic {
        &-selection,
        &-store {
          @include make-col(12);
        }
      }

      &_dynamic &-rbn {
        display: block;
        width: 100%;

        &:first-child {
          margin-bottom: 20px;
        }
      }
    }

    &__calc {
      & + & {
        margin-top: 10px;
      }
    }

    &__lbl {
      &_calc {
        width: 50%;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .order-line {
    &__inner {
      @include make-row;
    }

    &__img {
      @include make-col-ready;
      @include make-col(2, 9);
    }

    &__info {
      @include make-col-ready;
      @include make-col(4, 9);
    }

    &__calcs {
      @include make-col-ready;
      @include make-col(3, 9);
    }

    &__delivery {
      &-rbn {
        display: inline-block;
        width: 49%;
        vertical-align: top;
      }
    }

    &__lbl {
      &_collect {
        margin-right: 7px;
      }
    }

    &_charity {
      border-bottom: 1px solid $gray;

      &.order-line {
        padding-left: 20px;
        padding-top: 10px;
      }

      .order-line {
        &__img-static img {
          padding: 10px 30px 0;
        }

        &__info {
          padding-top: 10px;
        }
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .order-line {
    padding: 15px 0;

    &__delivery {
      margin-top: 15px;

      &-lbl {
        @include make-col(2, 9);
        text-align: right;
      }

      &-selection {
        @include make-col(4, 9);
      }

      &-collect {
        @include make-col(7, 9);
        @include make-col-offset(2, 9);
      }

      &-store {
        @include make-col(3, 9);
        text-align: left;
      }

      &_dynamic {
        margin: 15px 0 -15px;

        &-store {
          @include make-col(5, 9);
        }
      }
    }

    &_dynamic {
      &:last-child {
        & .order-line__delivery_dynamic {
          &::before {
            display: none;
          }
        }
      }
    }

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

        .order-line_dynamic & {
          margin-top: 15px;
        }
      }
    }

    &__lbl {
      &_calc {
        width: calc(33.333% + 10px);
      }
    }

    &__calculator-notification {
      margin-top: 12px;
    }

    &_charity {
      .order-line {
        &__img-static img {
          padding: 30px;
        }

        &__info,
        &__calcs {
          padding-top: 30px;
        }
      }
    }
  }
}