/**
 * Tooltip — pure-CSS, hover/focus-driven label via [data-st-tooltip].
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/tooltip
 *   - default = light/lite (white bg, dark text, border, shadow)
 *   - 12 placement variants in Geist; we ship the 4 main: top (default), bottom, left, right
 *   - color types: default (light), dark, secondary, success, warning, error
 *
 * Usage:
 *   <button data-st-tooltip="text">…</button>
 *   <button data-st-tooltip="text" data-st-tooltip-type="dark">…</button>
 *   <button data-st-tooltip="text" data-st-tooltip-placement="bottom">…</button>
 */

@layer components {

	[data-st-tooltip] {
		position: relative;
	}

	/* Base tooltip pill (default = light) */
	[data-st-tooltip]::after {
		content: attr(data-st-tooltip);
		position: absolute;
		inset-block-end: calc(100% + 8px);
		inset-inline-start: 50%;
		transform: translateX(-50%) translateY(4px);
		background: var(--st-bg);
		color: var(--st-text);
		border: 1px solid var(--st-border);
		padding: 0.4rem 0.7rem;
		border-radius: var(--st-radius);
		font-size: 0.8125rem;
		font-weight: 400;
		line-height: 1.3;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		z-index: 1100;
		box-shadow: 0 5px 20px rgb(0 0 0 / 0.15);
		transition:
			opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
			transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 200ms;
	}

	[data-st-tooltip]:hover::after,
	[data-st-tooltip]:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
		transition:
			opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
			transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
	}

	/* --- Color types (Geist palette) --- */

	[data-st-tooltip][data-st-tooltip-type="dark"]::after {
		background: var(--st-text);
		color: var(--st-bg);
		border-color: var(--st-text);
	}

	[data-st-tooltip][data-st-tooltip-type="secondary"]::after {
		background: #666;
		color: #fff;
		border-color: #666;
	}

	[data-st-tooltip][data-st-tooltip-type="success"]::after {
		background: #0070f3;
		color: #fff;
		border-color: #0070f3;
	}

	[data-st-tooltip][data-st-tooltip-type="warning"]::after {
		background: #f5a623;
		color: #fff;
		border-color: #f5a623;
	}

	[data-st-tooltip][data-st-tooltip-type="error"]::after {
		background: #ee0000;
		color: #fff;
		border-color: #ee0000;
	}

	/* --- Placements: bottom --- */

	[data-st-tooltip][data-st-tooltip-placement="bottom"]::after {
		inset-block-start: calc(100% + 8px);
		inset-block-end: auto;
		inset-inline-start: 50%;
		transform: translateX(-50%) translateY(-4px);
	}
	[data-st-tooltip][data-st-tooltip-placement="bottom"]:hover::after,
	[data-st-tooltip][data-st-tooltip-placement="bottom"]:focus-visible::after {
		transform: translateX(-50%) translateY(0);
	}

	/* --- Placements: left --- */

	[data-st-tooltip][data-st-tooltip-placement="left"]::after {
		inset-block-start: 50%;
		inset-block-end: auto;
		inset-inline-end: calc(100% + 8px);
		inset-inline-start: auto;
		transform: translateY(-50%) translateX(4px);
	}
	[data-st-tooltip][data-st-tooltip-placement="left"]:hover::after,
	[data-st-tooltip][data-st-tooltip-placement="left"]:focus-visible::after {
		transform: translateY(-50%) translateX(0);
	}

	/* --- Placements: right --- */

	[data-st-tooltip][data-st-tooltip-placement="right"]::after {
		inset-block-start: 50%;
		inset-block-end: auto;
		inset-inline-start: calc(100% + 8px);
		transform: translateY(-50%) translateX(-4px);
	}
	[data-st-tooltip][data-st-tooltip-placement="right"]:hover::after,
	[data-st-tooltip][data-st-tooltip-placement="right"]:focus-visible::after {
		transform: translateY(-50%) translateX(0);
	}
}