.ska-button {
	// border: 1px solid green !important;

	&[data-ska-tooltip] {
		--spacing: 6px;
		// border: 1px solid yellow !important;
		position: relative !important;

		&:hover {
			overflow: visible !important;
		}

		/* Popup */
		&::after {
			position: absolute;
			z-index: 1000003;
			pointer-events: none;
			font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
			content: attr(data-ska-tooltip);
			text-align: center;
			white-space: nowrap;
			// max-width: 200px;
			font-size: 12px;
			line-height: 1.4;
			background: #000;
			padding: 4px 8px;
			font-weight: normal;
			font-style: normal;
			color: #f0f0f0;
			border-radius: 2px;
			box-shadow: 0 1px 2px #0000000d, 0 2px 3px #0000000a, 0 6px 6px #00000008, 0 8px 8px #00000005;
		}

		/* Default Position (Top Center) */
		&:not([data-ska-tooltip-position])::after {
			left: 50%;
			transform: translateX(-50%);
			bottom: 100%;
			margin-bottom: var(--spacing);
		}

		&[data-ska-tooltip-position="top left"]::after {
			right: 0;
			bottom: 100%;
			margin-bottom: var(--spacing);
		}

		&[data-ska-tooltip-position="top right"]::after {
			left: 0;
			bottom: 100%;
			margin-bottom: var(--spacing);
		}

		&[data-ska-tooltip-position="right"]::after {
			left: calc(100% + var(--spacing));
			top: 50%;
			transform: translateY(-50%);
			margin-left: var(--spacing);
		}

		&[data-ska-tooltip-position="bottom left"]::after {
			right: 0;
			top: 100%;
			margin-top: var(--spacing);
		}

		&[data-ska-tooltip-position="left"]::after {
			right: calc(100% + var(--spacing));
			top: 50%;
			transform: translateY(-50%);
			margin-right: var(--spacing);
		}

		&[data-ska-tooltip-position="bottom right"]::after {
			left: 0;
			top: 100%;
			margin-top: var(--spacing);
		}

		&[data-ska-tooltip-position="bottom"]::after {
			left: 50%;
			transform: translateX(-50%);
			top: 100%;
			margin-top: var(--spacing);
		}

		/* Animation */
		&::after {
			pointer-events: none;
			visibility: hidden;
			opacity: 1;
			transform-origin: center bottom;
			transition: transform 0.1s ease;
		}
		&:hover::after {
			visibility: visible;
			pointer-events: auto;
		}
	}
}

.interface-interface-skeleton__footer:has([data-ska-tooltip]:hover) {
	z-index: 100001;
}