@import '../../helpers/helpers';

.shipment-details {
  margin-top: 12px;

  .shipment {
    display: flex;
    margin-bottom: 12px;

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: $blue-dark;
      width: 32px;
      height: 32px;
      border-radius: 50px;

      .icon {
        color: $white;
        font-size: 1rem;
      }
    }

    &__content {
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 8px;

      & > *:not(:first-child) {
        margin-top: 4px;
      }
    }

    &__title,
    &__info,
    &__count {
      font-size: .75rem;
      line-height: 1rem;
      color: $squant;
    }

    &__title {
      font-weight: 700;
      color: $gray-dark;
      margin-bottom: 0;
    }

    .track-link {
      text-decoration: none;
      font-weight: 500;
      font-size: .75rem;
      line-height: 1rem;
      color: $blue;
      max-width: max-content;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .shipment-details {
    grid-area: shipment;

    .shipment:last-child {
      margin-bottom: 0;
    }
  }
}

@include media-breakpoint-up(md) {
  .shipment-details {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;

    .shipment {
      margin-bottom: 0;
    }
  }
}

@include media-breakpoint-up(xl) {
  .shipment-details {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px 16px;
  }
}