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

.dops-tooltip.dops-popover {

	.dops-popover__arrow {
		border-width: 6px;
	}

	&.is-bottom-right,
	&.is-bottom-left,
	&.is-bottom {

		.dops-popover__arrow {
			border-bottom-color: color.adjust(calypso-colors.$gray, $lightness: -30%);
			top: 4px;
			right: 10px;

			&::before {
				display: none;
			}
		}

		&.is-error {

			.dops-popover__arrow {
				border-bottom-color: calypso-colors.$alert-red;
			}
		}

		&.is-warning {

			.dops-popover__arrow {
				border-bottom-color: calypso-colors.$alert-yellow;
			}
		}

		&.is-success {

			.dops-popover__arrow {
				border-bottom-color: calypso-colors.$alert-green;
			}
		}
	}

	&.is-top,
	&.is-top-left,
	&.is-top-right {

		.dops-popover__arrow {
			border-top-color: color.adjust(calypso-colors.$gray, $lightness: -30%);
			bottom: 4px;
			right: 10px;

			&::before {
				display: none;
			}
		}

		&.is-error {

			.dops-popover__arrow {
				border-top-color: calypso-colors.$alert-red;
			}
		}

		&.is-warning {

			.dops-popover__arrow {
				border-top-color: calypso-colors.$alert-yellow;
			}
		}

		&.is-success {

			.dops-popover__arrow {
				border-top-color: calypso-colors.$alert-green;
			}
		}
	}

	&.is-top,
	&.is-bottom {

		.dops-popover__arrow {
			margin-left: -6px;
		}
	}

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

		.dops-popover__arrow {
			margin-top: -6px;

			&::before {
				display: none;
			}
		}

		&.is-error {

			.dops-popover__arrow {
				border-right-color: calypso-colors.$alert-red;
			}
		}

		&.is-warning {

			.dops-popover__arrow {
				border-right-color: calypso-colors.$alert-yellow;
			}
		}

		&.is-success {

			.dops-popover__arrow {
				border-right-color: calypso-colors.$alert-green;
			}
		}
	}

	&.is-left {

		.dops-popover__arrow {
			margin-right: 4px;
			border-left-color: color.adjust(calypso-colors.$gray, $lightness: -30%);
		}
	}

	&.is-right {

		.dops-popover__arrow {
			margin-left: 4px;
			border-right-color: color.adjust(calypso-colors.$gray, $lightness: -30%);
		}
	}

	.dops-popover__inner {
		border: 0;
		box-shadow: none;
		border-radius: 2px;
		color: calypso-colors.$white;
		background: color.adjust(calypso-colors.$gray, $lightness: -30%);
		font-size: 12px;
		padding: 6px 10px;
		text-align: left;
	}

	&.is-error {

		.dops-popover__inner {
			background: calypso-colors.$alert-red;
		}
	}

	&.is-warning {

		.dops-popover__inner {
			background: calypso-colors.$alert-yellow;
		}
	}

	&.is-success {

		.dops-popover__inner {
			background: calypso-colors.$alert-green;
		}
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			font-size: 11px;
			font-weight: 100;
			border: 0;
		}
	}
}

.dops-tooltip__hr {
	margin: 8px 0;
	background: calypso-colors.$gray;
}
