// Variables
$pricing-box-light: $gray-400;

$pricing-box-fsz: $font-size-sm;
$pricing-box-border-color: $border-color;
$pricing-box-border-radius: $border-radius;
$pricing-box-shadow: $box-shadow-sm;

$pricing-box-value-fsz: px-to-rem( 66px );
$pricing-box-value-lh: $h1-line-height;
$pricing-box-icon-fsz: $font-size-base * 1.3;

$pricing-box-filled-bg: $gray-200;


// Base
.pricing-box {
	max-width: 430px;
	margin-left: auto;
	margin-right: auto;
	font-size: $pricing-box-fsz;
	background-color: $white;
	border: 1px solid $pricing-box-border-color;
	border-radius: $pricing-box-border-radius;
}

.pricing-box-header {
	padding: 20px 15px 0;
	border-top-left-radius: $pricing-box-border-radius;
	border-top-right-radius: $pricing-box-border-radius;
}

.pricing-box-label {
	font-weight: $font-weight-bold;
}

.pricing-box-divider {
	border-bottom: 1px solid $pricing-box-border-color;
}

.pricing-box-title {
	font-weight: 600;
}

.pricing-box-body {
	padding: 20px 15px;
}

.pricing-box-postfix {
	font-size: .363em;
}

.pricing-box-value {
	position: relative;
	font-size: $pricing-box-value-fsz;
	font-weight: $headings-font-weight;
	line-height: $pricing-box-value-lh;
	color: $headings-color;
}

.pricing-box-value-visible {
	transition: $transition-base;
}

.pricing-box-value-hidden {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: $transition-base;
}

.pricing-box-value-meta {
	color: $primary;
	font-weight: $font-weight-bold;
}

.pricing-box-list {
	list-style-type: none;
	padding-left: 0;

	> li + li {
		margin-top: 4px;
	}
}

.pricing-box-list-icon {
	padding-right: 0.7em;
	font-size: $pricing-box-icon-fsz;
	vertical-align: middle;
	color: $dark;
}

.pricing-box-links {
	text-align: center;
}

.pricing-box-link {
	padding-left: 0.3em;
	font-weight: $font-weight-bold;
	color: $dark;

	&:hover,
	&:focus {
		color: $primary;
	}
}


// Spacing
* + .pricing-box-title { margin-top: 6px; }
* + .pricing-box-value-meta { margin-top: 6px; }
* + .pricing-box-divider { margin-top: 15px; }
* + .pricing-box-list { margin-top: 15px; }
* + .pricing-box-btn { margin-top: 15px; }
* + .pricing-box-links { margin-top: 15px; }


// Pricing box filled
.pricing-box-filled {
	background-color: $pricing-box-filled-bg;
	border: none;
}


// Accent pricing box
.pricing-box-accent {
	border: none;
	box-shadow: $pricing-box-shadow;

	.pricing-box-title {
		color: inherit;
	}

	.pricing-box-value-meta {
		color: $primary;
	}

	.pricing-box-divider {
		border-color: transparent;
	}
}


// Theming
.pricing-box-accent {
	.pricing-box-header {
		color: $white;
		background-color: $primary;
	}
}

// Context
.switch-container {
	&.active {
		.pricing-box-value-visible {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}

		.pricing-box-value-hidden {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
	}
}


// Media
@include media-breakpoint-up(xxl) {
	.pricing-box-header {
		padding: 32px 40px 0;
	}

	.pricing-box-body {
		padding: 36px 40px 39px;
	}

	.pricing-box-list {
		> li + li {
			margin-top: 8px;
		}
	}

	* + .pricing-box-title { margin-top: 12px; }
	* + .pricing-box-value-meta { margin-top: 9px; }
	* + .pricing-box-subtitle { margin-top: 8px; }
	* + .pricing-box-divider { margin-top: 20px; }
	* + .pricing-box-list { margin-top: 39px; }
	* + .pricing-box-btn { margin-top: 32px; }
	* + .pricing-box-links { margin-top: 22px; }

	.pricing-box-accent {
		.pricing-box-header {
			padding: 40px 40px 0;
		}
	}
}