@import '../variables.less';
@import '../mixins.less';

@DefaultPriceLen: 480px;
@SmallPriceLen: 268px;

.wm-price {
  display: block;
  flex-direction: row;
  align-items: baseline;
  max-width: @DefaultPriceLen;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: flex-start;
  color: @color-brand;
  font-size: @font-size-10;

  &-default {
    max-width: @SmallPriceLen;
  }

  &-block {
    display: flex;
  }

  .text {
    font-weight: 500;
    white-space: nowrap;
    color: @color-brand;
  }

  &-plus {
    white-space: nowrap;

    &-default {
      font-size: @font-size-16;
    }

    &-large {
      font-size: @font-size-24;
    }
  }

  &-line {
    .text {
      color: rgba(0, 0, 0, 0.4);
      font-size: @font-size-10;
      text-decoration: line-through;
      margin-left: @spacing-4;
    }
  }

  &-pay-member {
    width: @font-size-12;
    height: @font-size-12;
    margin-left: @spacing-2;
  }

  &-style {
    flex-direction: row;
    align-items: baseline;

    &-unit {
      font-size: @font-size-10;
    }

    &-long {
      font-size: @font-size-24;
    }

    &-large {
      font-size: @font-size-20;
    }

    &-middle {
      font-size: @font-size-18;
    }

    &-small {
      font-size: @font-size-16;
    }

    &-mini {
      font-size: @font-size-14;
    }

    &-default {
      font-size: @font-size-10;
    }
  }

  &-points {
    flex-direction: row;
    align-items: baseline;
    white-space: nowrap;

    &-text {
      font-size: @font-size-10;
    }

    &-long {
      font-size: @font-size-24;
    }

    &-large {
      font-size: @font-size-20;
    }

    &-middle {
      font-size: @font-size-18;
    }

    &-small {
      font-size: @font-size-16;
    }

    &-mini {
      font-size: @font-size-14;
    }

    &-default {
      font-size: @font-size-10;
    }
  }
}