@use "../../../../../styles" as *;

.item {
  display: flex;
  flex-direction: column;
  gap: $gap-15;
  .item-head {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: $col-white;
    h4 {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .date {
      span {
        font-weight: 200;
      }
    }
  }

  .details-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    .detail {
      display: flex;
      align-items: center;
      justify-content: left;
      height: 35px;
      border-radius: $rad-10;
      .price-and-size {
        flex-basis: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: $rad-7 + 5;
        width: fit-content;
        background-color: $col-dark;
        h3 {
          padding: 8px 0;
          text-align: center;
          border-right: 2px solid $col-border;
          color: $col-white;
          font-weight: 500;
          height: 100%;
        }
        .price {
          text-align: center;
          padding: 8px 0;
          flex: 1;
        }
      }
      .quantity {
        width: 90px;
        text-align: center;
        span.Xsign {
          color: $col-orange;
        }
        color: $col-white;
        font-size: 18px;
        font-weight: 600;
      }
      .price {
        text-align: center;
      }
    }
  }
}
