bilingo-ui/src/components/Payment/PriceOptions/PriceOptions.less

@item_width: 70px;
@item_margin: 6px;
@item_border_width: 1px;
.options {
  p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(97, 106, 121, 1);
    margin-bottom: 20px;
  }
  .infoItem {
    padding-right: 0;
    .priceItem {
      background: rgba(243, 243, 243, 0.14);
      border-radius: 4px;
      border: @item_border_width solid rgba(207, 207, 207, 1);
      font-size: 14px;
      font-weight: 600;
      color: rgba(97, 106, 121, 1);
      display: inline-block;
      text-align: center;
      vertical-align: top;
      height: 30px;
      width: @item_width;
      line-height: 30px;
      cursor: pointer;
      margin: @item_margin;

      &.active {
        background: rgba(255, 50, 102, 0.1);
        border-radius: 4px;
        border: @item_border_width solid rgba(255, 50, 102, 1);
        color: rgba(97, 106, 121, 1);
      }
    }
    .priceInput {
      display: inline-block;
      min-width: 70px;
      width: auto;
      margin: @item_margin;
      text-align: center;
    }
    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      height: 30px;
      width: 50px;
      vertical-align: top;
      padding: 0 5px;
    }
    .rate {
      margin-left: 10px;
      i {
        margin-right: 5px;
        color: #1790ff;
      }
    }
  }
  &.multi {
    p {
      font-size: 14px;
      font-weight: 400;
      color: rgba(97, 106, 121, 1);
    }
    .infoItem {
      padding-right: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .priceBtn {
        display: flex;
        justify-content: space-between;
      }
      .priceItem {
        display: inline-block;
        background-color: #fff;
        border-radius: 4px;
        border: @item_border_width solid rgba(207, 207, 207, 1);
        &.active {
          background-color: #fff;
          color: #ff3266ff;
          border: @item_border_width solid rgba(255, 50, 102, 1);
        }
      }
      .priceInput {
        width: @item_width*3+ @item_margin*2;
        width: auto;
      }
    }
  }
}