@import '~styles/mixins';
@import '~styles/adminMixins';

.SingleOrder {
  padding: 0 50px;

  .container {
    display: flex;
    margin: 50px 0;
  }

  .client {
    flex: 2;
    margin-left: 30px;
    min-width: 300px;

    .client-card {
      padding: 0 20px;

      .subtitle {
        font-weight: bold;
        letter-spacing: 0.3px;
        padding: 20px 0;
        border-top: 2px solid #ededed;
      }

      .icon {
        color: $color_primary;
        margin-right: 15px;
        width: 15px;
        height: 15px;
      }

      .infos {
        > * {
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 20px;
          }
        }
      }

      .formatted-address {
        > * {
          margin-bottom: 10px;
          letter-spacing: 0.3px;

          &:last-child {
            margin-bottom: 20px;
          }
        }
      }

      .name {
        display: flex;
        align-items: center;
        padding: 20px 0;

        .letter {
          height: 30px;
          width: 30px;
          border-radius: 30px;
          font-weight: bold;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $color_primary;
          background-color: rgba($color: $color_primary, $alpha: 0.2);
          margin-right: 20px;
        }
      }
    }
  }

  .detail {
    flex: 5;

    .status-container {
      padding: 10px 20px;
      .status-line {
        display: flex;
        line-height: 2;
        .title {
          flex: 1;
        }
        .status {
          font-weight: bold;
          letter-spacing: 0.3px;
          flex: 1;
          justify-content: flex-end;
          display: flex;
        }
      }
    }

    .article-item {
      padding: 10px 20px;
      border-bottom: 2px solid #ededed;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      .title {
        flex: 3;
      }

      .image {
        width: 50px;
        height: 50px;
        background-position: center;
        background-size: cover;
        border-radius: 4px;
        margin-right: 30px;
      }

      .bold {
        font-weight: bold;
        letter-spacing: 0.3px;
        flex: 1;
        justify-content: flex-end;
        display: flex;
      }
    }

    .payment-total {
      border-top: 2px solid #ededed;
      padding: 20px;
      background: #f8f8f8;
      font-weight: bold;
      letter-spacing: 0.3px;
      display: flex;

      .price {
        flex: 1;
        text-align: right;
      }
    }

    .payment-container {
      padding: 20px;

      > * {
        padding-bottom: 15px;

        &:last-child {
          padding-bottom: 0px;
        }
      }

      .payment-line {
        display: flex;

        .title,
        .price {
          font-weight: bold;
          letter-spacing: 0.3px;
        }

        .info {
          letter-spacing: 0.3px;
          margin-left: 10px;
        }

        .price {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}

.CardDisplay {
  border-radius: 12px;
  border: solid 2px #ededed;
  margin-bottom: 30px;

  .header {
    border-bottom: 2px solid #ededed;
    display: flex;
    align-items: center;
    padding: 20px;

    .title {
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0.3px;
    }

    .size {
      border-radius: 4px;
      font-size: 10px;
      color: $color_primary;
      background-color: rgba($color: $color_primary, $alpha: 0.2);
      height: 16px;
      width: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
