.payment-status {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: $gray-bg;
  gap: 8px;
  margin-top: 12px;
  border-radius: 4px;
  grid-area: paymentStatus;

  &__logo {
    width: 38px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    .payments-status__image {
      max-width: 100%;
      height: auto;
      display: block;
    }
  }

  &__content {
    font-size: .75rem;
    line-height: 1rem;
  }

  &__text {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
  }

  &__title {
    font-weight: 500;
  }

  &--success {
    background-color: #67a5091a;
  }

  &--overdue {
    background-color: #cf000f1a;
  }

  &--partial {
    background-color: #ffc4391a;
  }
}

@include media-breakpoint-up(xs) {
  .wismo__order-pay .payment-status {
    margin-top: 8px;

    &--default {
      background-color: $white;
    }
  }
}

@include media-breakpoint-up(md) {
  .payment-status {
    &__content {
      flex-direction: row;
      gap: 8px;
    }
  }

  .wismo__order-pay .payment-status {
    &__content {
      flex-direction: column;
      gap: 0;
    }
  }
}

@include media-breakpoint-up(lg) {
  .payment-status {
    margin-top: 16px;
  }
}