@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";

@commission-mb: 5px;

.@{--css-prefix}-price {
  .flex-direction(row);
  overflow: hidden;

  &__text {
    font-family: var(--family-integer);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-zh);
    color: var(--color-primary);

    &-line {
      margin: 0 var(--price-line-horizontal-padding);
      font-family: var(--family-base);
      font-size: 40px;
    }
  }

  &__text-large {
    font-size: var(--font-size-xl);
  }

  &__text-middle {
    font-size: var(--font-size-base);
  }

  &__text-small {
    font-size: var(--font-size-sm);
  }

  &__text-content {
    font-size: var(--font-size-xl);
  }

  &__content-large {
    font-size: var(--price-font-size-lg);
  }

  &__content-large-middle {
    font-size: var(--price-font-size-ml);
  }

  &__content-middle {
    font-size: var(--font-size-xl);
  }

  &__content-small-middle {
    font-size: var(--font-size-base);
  }

  &__content-small {
    font-size: var(--font-size-sm);
  }

  &__commission {
    .flex-items(flex-end);
    height: var(--price-height);
    margin-left: var(--spacing-h-sm);

    &--box {
      box-sizing: border-box;
      height: var(--price-commission-height);
      margin-bottom: var(--commission-mb);
      padding: 0 var(--spacing-h-md);
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-xs);
      color: var(--color-white);
      background: var(--color-text-secondary);
      .flex-center();
    }
  }

  &__origin-price {
    margin-left: var(--spacing-h-md);
    font-family: var(--family-integer);
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm);
    color: var(--color-grey-2);
    text-decoration: line-through;
    opacity: .8;
  }
}