@import '../helpers/helpers';
@import '../components/load-more';

.wismo-hist {
  .account-heading__content {
    border: 0;
    margin-bottom: 15px;
  }

  .account-heading__title {
    text-align: center;
  }

  .sort-order-by {
    margin-bottom: 30px;

    .form-row__label {
      padding-right: 0;
    }

    .form-row__field {
      padding-left: 7px;
    }
  }

  &__table {
    border: 1px solid $gray-light;
    border-radius: 3px;
    margin-bottom: 20px;

    &:hover {
      box-shadow: 0 2px 7px 0 $black-transparent20;
    }

    .table__content {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &-action {
        display: flex;
        flex-direction: column;
        width: 100%;
        order: 2;

        .btn-primary {
          margin-bottom: 20px;
        }
      }

      &-date {
        flex: 1 0 0%;
        font-size: 1rem;
        line-height: 1.375rem;

        &-item {
          margin-bottom: 10px;
        }
      }

      .order-history-table__transactions {
        padding: 0;
        margin: 10px 0 20px;
      }
    }

    .table__heading {
      padding: 10px 20px;
      background-color: $gray-lighter;
      font-size: 1.25rem;
      line-height: 1.875rem;
      align-items: baseline;

      &-numb {
        margin-right: 10px;
      }
    }

    .info {
      &-num,
      &-date,
      &-time,
      &-status,
      &-price {
        font-weight: 700;
      }

      &-price {
        font-size: 1.5rem;
        margin-left: .4rem;
      }
    }

    .main-price {
      display: flex;
      flex-direction: row;
      align-items: baseline;

      &__vat {
        font-size: .75rem;
        margin-left: .4rem;
        font-weight: 500;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .wismo-hist {
    .account-heading__content {
      margin-bottom: 0;
    }

    &__table {
      .table__content {
        flex-direction: row;
        justify-content: space-between;

        &-action {
          width: 200px;
          order: inherit;

          .btn-primary {
            margin-bottom: 14px;
          }
        }

        .order-history-table__transactions {
          margin-bottom: 0;
        }
      }
    }
  }
}