.orders-list {
  max-width: 700px;
  margin: 0 auto;

  &__item {
    @media (min-width: 768px) {
      display: flex;
      justify-content: space-between;

      > div {
        flex: 1.4 1 0;
      }

      > span {
        flex: 1.4 1 0;
        text-align: right;
      }
    }

    &:hover {
      .orders-list__number {
        text-decoration: underline;
      }
    }
  }

  &__number {
    padding: 0 1rem;
    border-left: .5rem solid var(--primary-lightest);
    color: var(--primary);

    &--open {
      border-left-color: var(--info);
    }
    &--closed {
      border-left-color: var(--success);
    }
    &--cancelled {
      border-left-color: var(--danger);
    }
  }

  &__status,
  &__financial-status,
  &__fulfillment-status {
    font-weight: var(--font-bold);
    color: var(--info);

    @media (max-width: 767.98px) {
      float: right;
    }
  }

  &__status {
    &--closed {
      color: var(--success);
    }

    &--cancelled {
      color: var(--danger);
    }
  }

  &__financial-status {
    &--pending {
      color: var(--warning);
    }

    &--unauthorized,
    &--in_dispute,
    &--voided {
      color: var(--danger);
    }

    &--paid {
      color: var(--success);
    }
  }

  &__fulfillment-status {
    &--delivered {
      color: var(--success);
    }
  }
}