$dot-size: 8px; // Size of the indicator dot
$dot-scale: 3;  // How much the pulse animation should scale up by in size

.nux-dot-tip {
	&::before,
	&::after {
		border-radius: 100%;
		content: " ";
		pointer-events: none;
		position: absolute;
	}

	&::before {
		animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
		background: rgba(#00739c, 0.9);
		opacity: 0.9;
		height: $dot-size * $dot-scale;
		left: -($dot-size * $dot-scale) * 0.5;
		top: -($dot-size * $dot-scale) * 0.5;
		transform: scale(math.div(1, $dot-scale));
		width: $dot-size * $dot-scale;
	}

	&::after {
		background: #00739c;
		height: $dot-size;
		left: -$dot-size * 0.5;
		top: -$dot-size * 0.5;
		width: $dot-size;
	}

	@keyframes nux-pulse {
		100% {
			background: rgba(#00739c, 0);
			transform: scale(1);
		}
	}

	.components-popover__content {
		width: 350px;

		> div {
			padding: 20px 18px;
		}

		@include break-small {
			width: 450px;
		}

		.nux-dot-tip__disable {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	// Position the dot right next to the edge of the button
	&[data-y-axis="top"] {
		margin-top: -$dot-size * 0.5;
	}
	&[data-y-axis="bottom"] {
		margin-top: $dot-size * 0.5;
	}
	&[data-y-axis="middle"][data-y-axis="left"] {
		margin-left: -$dot-size * 0.5;
	}
	&[data-y-axis="middle"][data-y-axis="right"] {
		margin-left: $dot-size * 0.5;
	}

	// Position the tip content away from the dot
	&[data-y-axis="top"] .components-popover__content {
		margin-bottom: 20px;
	}
	&[data-y-axis="bottom"] .components-popover__content {
		margin-top: 20px;
	}
	&[data-y-axis="middle"][data-y-axis="left"] .components-popover__content {
		margin-right: 20px;
	}
	&[data-y-axis="middle"][data-y-axis="right"] .components-popover__content {
		margin-left: 20px;
	}

	// Extra specificity so that we can override the styles in .component-popover
	&[data-y-axis="left"],
	&[data-y-axis="center"],
	&[data-y-axis="right"] {
		// Position tips above popovers
		z-index: z-index(".nux-dot-tip");

		// On mobile, always position the tip below the dot and fill the width of the viewport
		@media (max-width: $break-small) {
			.components-popover__content {
				align-self: end;
				left: 5px;
				margin: 20px 0 0 0;
				max-width: none !important; // Override the inline style set by <Popover>
				position: fixed;
				right: 5px;
				width: auto;
			}
		}
	}

	&.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
		/*!rtl:ignore*/
		margin-left: 0;
	}

	&.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
		/*!rtl:ignore*/
		margin-right: 0;
	}

	&.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
		/*!rtl:ignore*/
		margin-left: -12px;
	}

	&.components-popover.edit-post-more-menu__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
		/*!rtl:ignore*/
		margin-right: -12px;
	}
}