@use "sass:math";
@import "@wordpress/base-styles/breakpoints";
@import "@automattic/components/src/styles/typography";

$slider-height: 40px;
$slider-bg-color: var(--studio-white);
$thumb-width: 40px;
$mark-diameter: 8px;
$mark-border-width: 2px;
$track-extra-width: math.div($thumb-width - $mark-diameter - $mark-border-width * 2, 2);
$track-height: 4px;

// The trick is to cover the extra slider track with blocks with the same background color as the slider.
@mixin slider-track-extra-cover() {
	content: "";
	position: absolute;
	width: $track-extra-width;
	height: $slider-height;
	background-color: $slider-bg-color;
}

.tier-upgrade-slider {
	--jp-white: #fff;
	--gray-gray-5: #dcdcde;

	margin-top: 42px;
	margin-bottom: 24px;
	background-color: $slider-bg-color;

	border: 1px solid var(--gray-gray-5);
	border-radius: 5px; // stylelint-disable-line scales/radii
	padding: 16px;

	// Make sure the icon size is not affected by the slider thumb size.
	.tier-upgrade-slider__thumb-icon {
		position: absolute;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 4px;
		left: 3px;
		box-sizing: border-box;
	}

	// Remove the box shadow on the slider thumb when not holding.
	.tier-upgrade-slider__slider:not(.jp-components-pricing-slider--is-holding) {
		.jp-components-pricing-slider__thumb.tier-upgrade-slider__thumb {
			box-shadow: none;
		}
	}

	.jp-components-pricing-slider__thumb.tier-upgrade-slider__thumb {
		width: $thumb-width;
		height: $slider-height;
		border-radius: 50%;
		background-color: var(--jp-green-40);
		color: var(--jp-white);
	}

	.jp-components-pricing-slider__track {
		// Based on slider height of 40px & track height of 4px.
		height: $track-height;
		top: math.div($slider-height, 2) - math.div($track-height, 2);
	}

	.jp-components-pricing-slider__control {
		// TODO: Determine control alignment.
		// Do we want the slider full-width or do we align based on thumb?
		// Alternatively, we could use some CSS to reposition the thumbs if either end-cap is selected.
		// width: calc(100% + $track-extra-width * 2);
		// margin-left: -($track-extra-width);

		&::before {
			@include slider-track-extra-cover();
			left: 0;
			z-index: 1;
		}

		&::after {
			@include slider-track-extra-cover();
			right: 0;
		}

		.mark {
			height: $mark-diameter;
			width: $mark-diameter;
			border: $mark-border-width solid var(--gray-gray-5);
			background-color: var(--gray-gray-5);
			border-radius: 50%;
			cursor: pointer;
			margin: 0 $track-extra-width;
			bottom: calc(50% - (math.div($mark-diameter, 2) + $mark-border-width));
		}

		.jp-components-pricing-slider__mark--selected {
			background-color: var(--jp-green-40);
			border-color: var(--jp-green-40);
		}
	}
}

// Override colors for WPCOM context.
.stats-purchase-page--is-wpcom {
	.jp-components-pricing-slider__thumb.tier-upgrade-slider__thumb {
		background-color: var(--color-primary);
	}

	.jp-components-pricing-slider__control {
		.jp-components-pricing-slider__mark--selected {
			background-color: var(--color-primary);
			border-color: var(--color-primary);
		}
	}
}

.tier-upgrade-slider__info-message {
	color: var(--studio-gray-40);
	margin: 12px 0 0;
	text-align: center;
	font-size: $font-body-small;
}

.tier-upgrade-slider__step-callouts {
	display: flex;
	justify-content: space-between;
	align-items: end;

	h2 {
		font-size: $font-body-small;
		font-weight: 600;

		@media (max-width: $break-medium) {
			font-size: $font-body-extra-small;
		}
	}

	b {
		font-size: $font-headline-small;
		font-weight: bold;
		margin: 0;

		@media (max-width: $break-medium) {
			font-size: $font-title-medium;
		}
	}

	.right-aligned {
		text-align: right;
	}

	.full-price-label {
		font-size: $font-title-medium;
		color: var(--studio-gray-40);
		text-decoration: line-through;

		@media (max-width: $break-medium) {
			font-size: $font-body-large;
		}
	}

	svg {
		fill: var(--studio-gray-20);
		cursor: pointer;
	}
}

.stats-purchase__info-popover {
	max-width: 244px;
	margin-left: 8px;

	.popover__arrow {
		border-color: var(--studio-gray-5);
	}

	.popover__inner {
		border-color: var(--studio-gray-5);
		border-radius: 4px;
	}
}

.stats-purchase__info-popover-content {
	padding: 24px;
	color: var(--studio-black);
	font-family: $font-sf-pro-text;
	font-size: $font-body;
	font-weight: 400;
	line-height: 24px;
	text-align: left;

}
