// Tour kit styles from library, otherwise they don't work properly.
@import "@automattic/components/dist/esm/pagination-control/style.scss";
@import '@automattic/tour-kit/dist/esm/styles.scss';
@import '@automattic/tour-kit/dist/esm/variants/wpcom/styles.scss';

.wpcom-tour-kit .tour-kit-frame__container {
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);

	&:hover {
		z-index: 9999;
	}
}

.wpcom-tour-kit-step-card {
	.wpcom-tour-kit-step-card-overlay-controls {
		padding-bottom: 0;
	}
	.components-card-body {
		height: 138px;
	}
}

$shadow-width: 10px;
$border-color: var(--wp--preset--color--primary, var(--wp-admin-theme-color, currentcolor));

.sensei-tour-highlight {
	box-shadow: 0 0 $shadow-width $border-color !important;

	&.sensei-tour-highlight--inset {
		box-shadow: inset 0 0 $shadow-width $border-color !important;
	}
}

// Just keeping it here in case we want to add a pulsing effect.
.sensei-tour-highlight.animate {
	-webkit-animation: blink 2.0s linear infinite !important;
	-moz-animation: blink 2.0s linear infinite !important;
	-ms-animation: blink 2.0s linear infinite !important;
	-o-animation: blink 2.0s linear infinite !important;
	animation: blink 2.0s linear infinite !important;
}

@keyframes blink {
	0% {
		box-shadow: 0 0 $shadow-width $border-color;
	}
	50% {
		box-shadow: none;
	}
	100% {
		box-shadow: 0 0 $shadow-width $border-color;
	}
}
@-webkit-keyframes blink {
	0% {
		box-shadow: 0 0 $shadow-width $border-color;
	}
	50% {
		box-shadow: 0 0 0;
	}
	100% {
		box-shadow: 0 0 $shadow-width $border-color;
	}
}
