@use "sass:math";
@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/z-index";

$wpcom-tour-kit-step-card-overlay-controls-button-bg-color: #32373c; // former $dark-gray-700. TODO: replace with standard color

.wpcom-tour-kit-minimized {
	border-radius: 2px;
	box-shadow:
		0 2px 6px rgba(60, 66, 87, 0.08),
		0 0 0 1px rgba(60, 66, 87, 0.16),
		0 1px 1px rgba(0, 0, 0, 0.08);
	background-color: $white;
	color: $black;

	.components-button {
		height: 44px;

		.wpcom-tour-kit-minimized__tour-index {
			color: $gray-600;
		}

		svg {
			color: #50575e;
		}

		&:hover {
			.wpcom-tour-kit-minimized__tour-index,
			svg {
				color: inherit;
			}
		}
	}
}

.wpcom-tour-kit-step-card__heading {
	font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
	margin: 0.5rem 0;
}

.wpcom-tour-kit-step-card__description {
	font-size: 0.875rem;
	/* stylelint-disable-next-line declaration-property-unit-allowed-list */
	line-height: 1.5rem;
	margin: 0;

	.components-button {
		height: auto;
		line-height: 1;
		text-decoration: underline;
		padding: 0 0 0 4px;
	}
}

// @todo clk - update?
.wpcom-tour-kit .tour-kit-frame__container {
	box-shadow: none;
}

.wpcom-tour-kit-step-card {
	width: 400px;
	max-width: 92vw;

	&.wpcom-tour-kit-step-card.is-elevated {
		box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 2px 4px 0;
	}

	&.components-card {
		border: none;
		border-radius: 4px;
		box-shadow: none;
	}

	.components-card__body {
		min-height: 114px;
	}

	.components-card__body,
	.components-card__footer {
		border-top: none;
		padding: $grid-unit-20 !important;
	}

	.components-card__footer {
		.wpcom-tour-kit-rating__end-text {
			color: $gray-600;
			font-size: 0.875rem;
			font-style: italic;
		}

		.wpcom-tour-kit-rating__end-icon.components-button.has-icon {
			background-color: #f6f7f7;
			border-radius: 50%;
			color: $gray-600;
			margin-left: 8px;

			path {
				fill: $gray-600;
			}

			&.active {
				background-color: $black;
				opacity: 1;

				path {
					fill: $white;
				}
			}
		}
	}

	.components-card__media {
		height: 0;
		padding-top: math.percentage(math.div(math.ceil(math.div(1, 1.53) * 100), 100)); // img width:height ratio (1:1.53)
		position: relative;
		width: 100%;

		img {
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	.components-guide__page-control {
		margin: 0;

		.components-button {
			min-width: auto;
			&.has-icon {
				padding: 3px;
			}
		}

		li {
			margin-bottom: 0;
		}
	}
}

.wpcom-tour-kit-step-card-overlay-controls__minimize-icon svg {
	position: relative;
	left: -2px;
}

.wpcom-tour-kit-step-card-overlay-controls {
	left: 0;
	padding: $grid-unit-15;
	right: 0;
	z-index: 1; // z-index is needed because overlay controls are written before components-card__media, and so ends up under the image

	.components-button {
		width: 32px;
		min-width: 32px;
		height: 32px;
		background: $wpcom-tour-kit-step-card-overlay-controls-button-bg-color;
		transition: opacity 200ms;
		opacity: 0.7;

		&:active {
			opacity: 0.9;
		}
	}

	@media ( hover: hover ) and ( pointer: fine ) {
		// styles only applicable for hoverable viewports with precision pointing devices connected (eg: mouse)
		.components-button {
			opacity: 0;
		}

		.tour-kit-frame__container:hover &,
		.tour-kit-frame__container:focus-within & {
			.components-button {
				opacity: 0.7;

				&:hover,
				&:focus {
					opacity: 0.9;
				}
			}
		}
	}
}

.wpcom-tour-kit-step-card-navigation__next-btn {
	margin-left: $grid-unit-15;
	justify-content: center;
	min-width: 85px;
}

.wpcom-tour-kit-step-card__media {
	position: relative;
}

// TODO: Remove once @wordpress/components/src/card/styles/card-styles.js is updated
.wpcom-tour-kit-step-card__media img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.wpcom-tour-kit-step-card__media-link {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		display: none;
		transition: transform 0.15s ease-in-out;

		&:hover {
			transform: scale(1.05);
		}
	}

	&--playable {
		background-color: rgba(0, 0, 0, 0.5);

		svg {
			display: block;
		}
	}
}