// Driver.js (onboarding tour) styles — adapted from driver.js/dist/driver.css and themed for VS Code webviews.

@use '../../shared/styles/utils';

@mixin core() {
	.driver-overlay path {
		opacity: 1 !important;
		fill: var(--gl-overlay-color) !important;
	}

	.driver-active .driver-overlay,
	.driver-active * {
		pointer-events: none;
	}

	.driver-active .driver-active-element,
	.driver-active .driver-active-element *,
	.driver-popover,
	.driver-popover * {
		pointer-events: auto;
	}

	@keyframes animate-fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.driver-fade .driver-overlay {
		animation: animate-fade-in var(--gl-duration-medium) var(--gl-ease-in-out);
	}

	.driver-fade .driver-popover {
		animation: animate-fade-in var(--gl-duration-medium);
	}

	.driver-popover {
		all: unset;
		position: fixed;
		top: 0;
		right: 0;

		// Intentional exception to the GitLens z-index scale: this styles the third-party
		// driver.js onboarding popover (DOM we don't author). driver.js is a modal-like takeover
		// — it dims the page and sets pointer-events: none on everything else — so it never needs
		// to compose with the browser top layer the way our own overlays do. The raw high value is
		// a deliberate "above all onboarded content" choice, not a stray nuke value to retire.
		z-index: 1000000000;
		box-sizing: border-box;
		min-width: var(--gl-onboarding-width-min, 250px);
		max-width: var(--gl-onboarding-width-max, 300px);
		padding: var(--gl-space-24);
		margin: 0;
		color: var(--wa-tooltip-color);
		background-color: var(--wa-tooltip-background-color);
		border-radius: var(--wa-tooltip-border-radius);

		@include utils.elevated-surface(var(--gl-shadow-tooltip), var(--gl-tooltip-border-color));
	}

	.driver-popover * {
		font-family: var(--wa-tooltip-font-family);
	}

	.driver-popover-title {
		position: relative;
		display: block;
		margin: 0;
		font: 19px / normal sans-serif;
		font-weight: 700;
		line-height: 1.5;
		zoom: 1;
	}

	.driver-popover-close-btn {
		all: unset;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 32px;
		height: 28px;
		font-size: 1.6rem;
		font-weight: 500;
		color: var(--wa-tooltip-color);
		text-align: center;
		cursor: pointer;
		opacity: 0.5;
		transition: opacity;
		transition-duration: var(--gl-duration-medium);
	}

	.driver-popover-close-btn:hover,
	.driver-popover-close-btn:focus {
		opacity: 1;
	}

	.driver-popover-title[style*='block'] + .driver-popover-description {
		margin-top: var(--gl-space-16);
	}

	.driver-popover-description {
		margin-bottom: 0;
		font-weight: 400;
		line-height: 1.5;
		zoom: 1;
	}

	.driver-popover-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: var(--gl-space-16);
		text-align: right;
		zoom: 1;
	}

	.driver-popover-progress-text {
		font-size: var(--gl-font-base);
		font-weight: 400;
		zoom: 1;
	}

	.driver-popover-footer button {
		all: unset;
		box-sizing: border-box;
		display: inline-block;
		padding: var(--gl-space-8);
		font: 12px / normal var(--wa-tooltip-font-family);
		line-height: 1.35;
		color: var(--vscode-button-secondaryForeground);
		text-decoration: none;
		cursor: pointer;
		zoom: 1;
		outline: 0;

		// text-shadow: 1px 1px 0 #fff;
		background-color: var(--vscode-button-secondaryBackground);
		border: var(--gl-border-width) solid var(--vscode-button-border, transparent);
		border-radius: var(--gl-radius-sm);
	}

	.driver-popover-footer .driver-popover-btn-disabled {
		pointer-events: none;
		opacity: 0.5;
	}

	:not(body):has(> .driver-active-element) {
		overflow: hidden !important;
	}

	.driver-no-interaction,
	.driver-no-interaction * {
		pointer-events: none !important;
	}

	.driver-popover-footer button:hover,
	.driver-popover-footer button:focus {
		background-color: var(--vscode-button-secondaryHoverBackground);
	}

	.driver-popover-navigation-btns {
		display: flex;
		flex-grow: 1;
		gap: var(--gl-space-8);
		justify-content: flex-end;
	}

	.driver-popover-arrow {
		position: absolute;
		width: var(--wa-tooltip-arrow-size);
		height: var(--wa-tooltip-arrow-size);
		content: '';
		background-color: var(--wa-tooltip-background-color);
		border: var(--gl-border-width) solid var(--gl-tooltip-border-color);
	}

	.driver-popover-arrow-side-over {
		display: none;
	}

	.driver-popover-arrow-side-left {
		left: 100%;
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
	}

	.driver-popover-arrow-side-right {
		right: 100%;
		border-top-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}

	.driver-popover-arrow-side-top {
		top: 100%;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}

	.driver-popover-arrow-side-bottom {
		bottom: 100%;
		border-top-color: transparent;
		border-right-color: transparent;
		border-left-color: transparent;
	}

	.driver-popover-arrow-side-center {
		display: none;
	}

	.driver-popover-arrow-side-left.driver-popover-arrow-align-start,
	.driver-popover-arrow-side-right.driver-popover-arrow-align-start {
		top: 15px;
	}

	.driver-popover-arrow-side-top.driver-popover-arrow-align-start,
	.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start {
		left: 15px;
	}

	.driver-popover-arrow-align-end.driver-popover-arrow-side-left,
	.driver-popover-arrow-align-end.driver-popover-arrow-side-right {
		bottom: 15px;
	}

	.driver-popover-arrow-side-top.driver-popover-arrow-align-end,
	.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end {
		right: 15px;
	}

	.driver-popover-arrow-side-left.driver-popover-arrow-align-center,
	.driver-popover-arrow-side-right.driver-popover-arrow-align-center {
		top: 50%;
		margin-top: -5px;
	}

	.driver-popover-arrow-side-top.driver-popover-arrow-align-center,
	.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center {
		left: 50%;
		margin-left: -5px;
	}

	.driver-popover-arrow-none {
		display: none;
	}
}
