@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/mixins';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/colors';
//Local Variables
$pricing-lineheight: 1.25;
$pricing-fontsize: $bodyFontSize5;
$pricing-icon-width: 11px;
$pricing-icon-emphasis-width: $pricing-icon-width + 7px;
$pricing-symbol-top: 0.5em;

$pricing-spacing: 4px;

$pricing-prefix-icon-spacing: 8px;

//Component Styles
.pricing {
	&_srPrice {
		@extend %sr-only;
	}
	&_formattedPrice {
		display: flex;
		max-width: var(--max-price-width);

		&--align-right {
			text-align: right;
		}
		&--multiple-line {
			flex-direction: column;
		}
		&:not(&--multiple-line) {
			align-items: baseline;
			flex-wrap: wrap;
		}
	}
	&_caption {
		&--with-suffix {
			padding-right: $pricing-spacing;
		}
	}
 	&_contentWrapper {
		&--with-prefix-icon {
			position: relative;
			padding-left: calc(#{$pricing-icon-width} + #{$pricing-prefix-icon-spacing});
		}
		&--with-prefix-icon#{&}--emphasis {
			padding-left: calc(#{$pricing-icon-emphasis-width} + #{$pricing-prefix-icon-spacing});
		}
	}
	&_content {
		display: flex;

		&:not(&--multiple-line) {
			align-items: baseline;
			flex-wrap: wrap;
		}
		&--emphasis {
			line-height: 1.2;
		}
		&--multiple-line {
			flex-direction: column;
		}
		&--align-price-right {
			justify-content: end;
		}
		&--vertical-align-price-frequency {
			flex-direction: column;
			align-items: end !important;
		}
	}
	&_symbol {
		top: auto;
		font-size: inherit;
		line-height: inherit;

		&--emphasis {
			top: -0.5em;
			font-size: 1.15rem;
		}
	}
	&_value {
		&--with-suffix {
			padding-right: $pricing-spacing;
		}

		&--configurator{
			font-weight: 700;
			font-size: 1rem;
		}

		&--emphasis {
			font-weight: 700;
			font-size: 1.5rem;
		}

	}
	&_suffix {
		@include media-sm-down {
			display: block;
		}
	}

	// Multiple lines spacing
	&_caption--multiple-line + &_contentWrapper {
		margin-top: 1px;
	}

	&_unit, &_frequency {
		&--uppercase-first-letter {
			display: inline-block;
			text-transform: lowercase;

			&:first-letter {
				text-transform: uppercase;
			}
		}
	}
}
