@use "sass:color";
@use "../../scss/z-index";
@use "../../scss/calypso-colors";

/**
 * "popover" theme for `component/tip`.
 */

.dops-popover {
	font-size: 11px;
	z-index: z-index.z-index("root", ".dops-popover");
	position: absolute;
	top: 0;
	left: 0 #{"/*rtl:ignore*/"};
	right: auto #{"/*rtl:ignore*/"};

	.dops-popover__inner {
		background-color: calypso-colors.$white;
		border: 1px solid color.adjust(calypso-colors.$gray, $lightness: 20%);
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);
		text-align: center;
		position: relative;

		a {
			color: calypso-colors.$black;
			text-decoration: underline;

			&:hover {
				text-decoration-thickness: 3px;
			}

			&:focus {
				text-decoration-line: none;
				border-radius: 2px;
				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #000;
				outline: 3px solid transparent;
			}
		}
	}

	.dops-popover__arrow {
		border: 10px dashed color.adjust(calypso-colors.$gray, $lightness: 20%);
		height: 0;
		line-height: 0;
		position: absolute;
		width: 0;
		z-index: z-index.z-index(".dops-popover", ".dops-popover .dops-popover__arrow");
	}

	&.fade {
		transition: opacity 100ms;
	}

	@mixin shared-between-base-and-before( $side ) {
		$opposite-side: "";
		$cross-side: "";
		$cross-opposite-side: "";

		@if $side == "top" {
			$opposite-side: "bottom";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "bottom" {
			$opposite-side: "top";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "left" {
			$opposite-side: "right";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		} @else if $side == "right" {
			$opposite-side: "left";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		}

		#{$cross-side}: 50% #{"/*rtl:ignore*/"};
		margin-#{$cross-side}: -10px#{"/*rtl:ignore*/"};
		border-#{$side}-style: solid#{"/*rtl:ignore*/"};
		border-#{$opposite-side}: none#{"/*rtl:ignore*/"};
		border-#{$cross-side}-color: transparent#{"/*rtl:ignore*/"};
		border-#{$cross-opposite-side}-color: transparent#{"/*rtl:ignore*/"};
	}

	@mixin popover__arrow( $side ) {
		$opposite-side: "";
		$cross-side: "";
		$cross-opposite-side: "";

		@if $side == "top" {
			$opposite-side: "bottom";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "bottom" {
			$opposite-side: "top";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "left" {
			$opposite-side: "right";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		} @else if $side == "right" {
			$opposite-side: "left";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		}

		&.is-#{$side} .dops-popover__arrow,
		&.is-#{$side}-#{$cross-side} .dops-popover__arrow,
		&.is-#{$side}-#{$cross-opposite-side} .dops-popover__arrow {

			#{$opposite-side}: 0 #{"/*rtl:ignore*/"};

			@include shared-between-base-and-before( $side );

			&::before {
				#{$opposite-side}: 2px #{"/*rtl:ignore*/"};
				border: 10px solid calypso-colors.$white;
				content: " ";
				position: absolute;

				@include shared-between-base-and-before( $side );
			}
		}
	}

	@include popover__arrow( "top" );
	@include popover__arrow( "bottom" );
	@include popover__arrow( "left" );
	@include popover__arrow( "right" );

	&.is-top-left,
	&.is-bottom-left,
	&.is-top-right,
	&.is-bottom-right {
		padding-right: 0;
		padding-left: 0;
	}

	&.is-top-left .dops-popover__arrow,
	&.is-bottom-left .dops-popover__arrow {
		left: auto #{"/*rtl:ignore*/"};
		right: 5px #{"/*rtl:ignore*/"};
	}

	&.is-top-right .dops-popover__arrow,
	&.is-bottom-right .dops-popover__arrow {
		left: 15px #{"/*rtl:ignore*/"};
	}

	// inner
	&.is-top .dops-popover__inner,
	&.is-top-left .dops-popover__inner,
	&.is-top-right .dops-popover__inner {
		top: -10px #{"/*rtl:ignore*/"};
	}

	&.is-left .dops-popover__inner,
	&.is-top-right .dops-popover__inner,
	&.is-bottom-right .dops-popover__inner {
		left: -10px #{"/*rtl:ignore*/"};
	}

	&.is-bottom .dops-popover__inner,
	&.is-bottom-left .dops-popover__inner,
	&.is-bottom-right .dops-popover__inner {
		top: 10px #{"/*rtl:ignore*/"};
	}

	&.is-right .dops-popover__inner,
	&.is-top-left .dops-popover__inner,
	&.is-bottom-left .dops-popover__inner {
		left: 10px #{"/*rtl:ignore*/"};
	}

	&.is-dialog-visible {
		z-index: z-index.z-index("root", ".dops-popover.is-dialog-visible"); /* Above .dialog */
	}
}

.dops-popover__menu {
	display: flex;
	flex-direction: column;
	min-width: 200px;
}

.dops-popover__menu-item {
	position: relative;
	background: inherit;
	border: none;
	border-radius: 0;
	color: calypso-colors.$gray-dark;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 8px 16px;
	text-align: left;
	transition: all 0.05s ease-in-out;

	&:first-child {
		margin-top: 5px;
	}

	&:hover,
	&:focus {
		background-color: calypso-colors.$blue-medium;
		border: 0;
		box-shadow: none;
		color: #fff;

		.gridicon {
			color: calypso-colors.$white;
		}
	}

	&[disabled]:hover,
	&[disabled]:focus {
		background: transparent;
		cursor: default;
	}

	&:last-child {
		margin-bottom: 5px;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	// Menu Items with Icons
	&.has-icon {
		padding-left: 42px;
	}

	// with gridicons
	.gridicon {
		color: color.adjust(calypso-colors.$gray, $lightness: 10%);
		vertical-align: bottom;
		margin-right: 8px;
	}
}

.dops-popover__hr {
	margin: 8px 0;
	background: color.adjust(calypso-colors.$gray, $lightness: 30%);
}
