/**
 * Purchase orders
 */

@media screen {

  .status-item {
    display: grid;
    grid-gap: 0.5rem 1rem;
    grid-template-columns: repeat(2, auto);
    grid-template-areas:
      "supplier supplier"
      "wines wines"
      "order-total order-total"
      "order-date order-date"
      "delivery-date delivery-date"
      "status status"
      "actions actions";
  }

  .status-item + .status-item {
    margin-top: 1.5rem;
  }

  /* Margin resets */
  .status-item .form-item,
  .status-item > *,
  .status-item > * > * {
    margin-top: 0;
  }

  /* Edge to edge layout on status items */
  p[class^="status-item-"] {
    display: flex;
    justify-content: space-between;
  }

  /* Supplier */
  .status-item-supplier {
    grid-area: supplier;
    font-size: 1.4em;
    margin: 0;
  }

  /* Wines */
  .status-item-wines {
    grid-area: wines;
    margin: 1.5em 0;
  }

  .status-item-wines table {
    width: 100%;
  }

  .status-item-wines thead tr,
  .status-item-wines tbody {
    border-bottom: 1px solid var(--mid-light-grey);
  }

  .status-item-wines td {
    padding-bottom: 0.3em;
    padding-top: 0.3em;
  }

  .status-item-wines td button {
    margin: 0 0 0 1em;
  }

  .status-item-wines input {
    text-align: inherit;
    padding: 0 0.2em;
    width: 8ch;
  }

  /* Order total */
  .status-item-order-total {
    grid-area: order-total;
  }

  /* Order date */
  .status-item-order-date {
    grid-area: order-date;
  }

  /* Delivery date */
  .status-item-delivery-date {
    grid-area: delivery-date;
  }

  /* Order status */
  .status-item-status {
    grid-area: status;
  }

  .status-item-status .icon {
    height: 1em;
    width: 1em;
    vertical-align: middle;
  }

  /* Order actions */
  .status-item-actions {
    grid-area: actions;
    justify-self: end;
  }
}

@media only screen and (min-width: 26em) {

  .status-item {
    grid-template-areas:
      "supplier supplier"
      "wines wines"
      "order-total ."
      "order-date ."
      "delivery-date ."
      "status ."
      "actions actions";
  }
}

@media only screen and (min-width: 42em) {

  .status-item {
    grid-template-columns: repeat(4, auto);
    grid-template-areas:
      "supplier supplier supplier supplier"
      "wines wines wines wines"
      ". . . order-total"
      ". . . order-date"
      ". . . delivery-date"
      ". . . status"
      "actions actions actions actions";
  }
}