@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins/breakpoints';

.Item {
  border-top: 1px solid #dfdfdf;

  &:first-child {
    border-top: 0;
  }

  display: flex;
  justify-content: space-between;
  margin: 5px;
  padding: 0 5px;
  color: #1e1e1e;
  line-height: 40px;
  min-height: 40px;
  flex-wrap: wrap;

  span {
    // white-space: nowrap;
    display: inline-block;
  }
}

@include media-breakpoint-down(sm) {
  .Item {
    line-height: 24px;

    .description {
      order: 1;
      width: calc(100% - 50px);
      font-weight: 600;
    }

    .commerceId {
      order: 2;
      width: 50px;
      text-align: right;
      color: #818181;
    }

    .price {
      order: 3;
      width: 100%;
    }

    .status {
      order: 4;
      width: 50%;
    }

    .updatedAt {
      order: 5;
      width: 50%;
      text-align: right;
    }
  }
}