.payment-transactions {
  width: 100%;

  &__accordion {
    margin-bottom: 0;
    display: inline-flex;
    cursor: pointer;

    &_text {
      margin-right: 10px;
    }

    &_icon {
      display: flex;
      align-items: center;
      color: $blue;
      transform: rotate(-180deg);
      font-size: .875rem;
      transition: .3s;

      .collapsed & {
        transform: rotate(0);
      }
    }
  }

  &__line {
    display: flex;
    width: 100%;
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1;

    & span {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &:first-of-type {
      margin-top: 20px;
    }

    &_date {
      @include make-col(3, 12);
    }

    &_type {
      @include make-col(6, 12);
      padding: 0 15px;
    }

    &_status {
      @include make-col(3, 12);
      padding: 0 15px;
    }
  }
}

@include media-breakpoint-down(lg) {
  .payment-transactions {
    &__line {
      &_date {
        @include make-col(23, 100);
      }

      &_type {
        @include make-col(46, 100);
      }

      &_status {
        @include make-col(31, 100);
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .payment-transactions {
    &__line {
      &_date {
        @include make-col(25, 100);
      }

      &_type {
        @include make-col(48, 100);
      }

      &_status {
        @include make-col(27, 100);
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .payment-transactions {
    &__line {
      flex-wrap: wrap;
      line-height: 1.4;
      margin-top: 10px;
      padding: 0 1px;

      &:first-of-type {
        margin-top: 15px;
      }

      &_date,
      &_type,
      &_status {
        @include make-col(12);
        padding: 0;
      }
    }
  }

  .order-details-table__transactions {
    margin-bottom: 20px;

    & .payment-transactions__line {
      line-height: 1.57143;
    }
  }
}

@include media-breakpoint-up(sm) {
  .order-details-table__content {
    & .payment-transactions {
      margin-top: 20px;
      font-size: .875rem;

      &__line {
        font-size: .875rem;
        line-height: .875rem;
        font-weight: 400;

        &_date {
          @include make-col(4);
        }

        &_type {
          @include make-col(4);
          padding: 0 10px;
        }

        &_status {
          @include make-col(4);
          padding: 0 20px;
        }
      }
    }
  }
}