@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/spacings';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-price {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-block-size: rem(28px);
  line-height: 1;
  block-size: rem(28px);
  inline-size: fit-content;
  padding-block: rem(2px);
  padding-inline: var(--vtmn-spacing_2);
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  font-weight: var(--vtmn-typo_font-weight--bold);
  color: var(--vtmn-semantic-color_content-primary);
  background-color: transparent;
  text-align: center;
  border-radius: var(--vtmn-radius_100);
}

/* VARIANTS */
.vtmn-price_variant--default {
  background-color: transparent;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-price_variant--accent {
  background-color: var(--vtmn-semantic-color_background-accent);
  color: var(--vtmn-semantic-color_content-accent);
}

.vtmn-price_variant--alert {
  background-color: var(--vtmn-semantic-color_background-alert);
  color: var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-price_variant--strikethrough {
  background-color: transparent;
  color: var(--vtmn-semantic-color_content-tertiary);
  text-decoration: line-through;
}

/* SIZES */

/* XSmall */
.vtmn-price_size--xsmall {
  min-block-size: rem(20px);
  block-size: rem(20px);
  font-size: var(--vtmn-typo_caption-1-font-size);
}

/* Small */
.vtmn-price_size--small {
  min-block-size: rem(24px);
  block-size: rem(24px);
  font-size: var(--vtmn-typo_text-3-font-size);
}

/* Medium */
.vtmn-price_size--medium {
  min-block-size: rem(28px);
  block-size: rem(28px);
  font-size: var(--vtmn-typo_text-2-font-size);
}

/* Large */
.vtmn-price_size--large {
  min-block-size: rem(32px);
  block-size: rem(32px);
  font-size: var(--vtmn-typo_text-1-font-size);
}

/* NO-PADDING */

.vtmn-price--no-padding {
  min-block-size: 0;
  block-size: auto;
  padding: 0;
}
