@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-fontsize-emphasis: 34px;
$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 {
	&_wrapper {
		display: flex;
		font-size: $bodyFontSize5;
		line-height: $pricing-lineheight;

		&--align-right {
			text-align: right;
		}
		&--multiple-line {
			flex-direction: column;
		}
		&:not(&--multiple-line) {
			align-items: baseline;
			flex-wrap: wrap;
		}
	}
	&_caption {
		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});
		}
	}
	&_prefixIcon {
		position: absolute;
		top: calc(#{$pricing-fontsize} * #{$pricing-lineheight} / 2);
		left: 0;
		transform: translateY(-50%);
		width: $pricing-icon-width;
		fill: $body-color;

		&--emphasis {
			top: calc(#{$pricing-fontsize-emphasis} * #{$pricing-lineheight} / 2);
			width: $pricing-icon-emphasis-width;
		}
	}
	&_content {
		display: flex;

		&:not(&--multiple-line) {
			align-items: baseline;
			flex-wrap: wrap;
		}
		&--multiple-line {
			flex-direction: column;
		}
	}
	&_symbol {
		top: auto;
		font-size: inherit;
		line-height: inherit;

		&--emphasis {
			top: -0.5em;
			font-size: 55%;
		}
	}
	&_value {
		margin-right: $pricing-spacing;

		&--emphasis {
			font-size: $pricing-fontsize-emphasis;
			font-weight: 700;
		}
	}
	&_suffix {
		@include media-sm-down {
			display: block;
		}
	}
	&_limitLabel {
		display: inline-block;
		margin-top: $pricing-spacing;

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