Automata/packages/design-system/theme/src/popper.scss

@use "mixins/mixins";
@use "./common/var";

@include mixins.b(popper) {
	.popper__arrow,
	.popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
	}

	.popper__arrow {
		border-width: var.$popover-arrow-size;
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	}

	.popper__arrow::after {
		content: ' ';
		border-width: var.$popover-arrow-size;
	}

	&[x-placement^='top'] {
		margin-bottom: #{var.$popover-arrow-size + 6};
	}

	&[x-placement^='top'] .popper__arrow {
		bottom: -(var.$popover-arrow-size);
		left: 50%;
		margin-right: #{var.$tooltip-arrow-size * 0.5};
		border-top-color: var.$popover-border-color;
		border-bottom-width: 0;

		&::after {
			bottom: 1px;
			margin-left: -(var.$popover-arrow-size);
			border-top-color: var.$popover-background-color;
			border-bottom-width: 0;
		}
	}

	&[x-placement^='bottom'] {
		margin-top: #{var.$popover-arrow-size + 6};
	}

	&[x-placement^='bottom'] .popper__arrow {
		top: -(var.$popover-arrow-size);
		left: 50%;
		margin-right: #{var.$tooltip-arrow-size * 0.5};
		border-top-width: 0;
		border-bottom-color: var.$popover-border-color;

		&::after {
			top: 1px;
			margin-left: -(var.$popover-arrow-size);
			border-top-width: 0;
			border-bottom-color: var.$popover-background-color;
		}
	}

	&[x-placement^='right'] {
		margin-left: #{var.$popover-arrow-size + 6};
	}

	&[x-placement^='right'] .popper__arrow {
		top: 50%;
		left: -(var.$popover-arrow-size);
		margin-bottom: #{var.$tooltip-arrow-size * 0.5};
		border-right-color: var.$popover-border-color;
		border-left-width: 0;

		&::after {
			bottom: -(var.$popover-arrow-size);
			left: 1px;
			border-right-color: var.$popover-background-color;
			border-left-width: 0;
		}
	}

	&[x-placement^='left'] {
		margin-right: #{var.$popover-arrow-size + 6};
	}

	&[x-placement^='left'] .popper__arrow {
		top: 50%;
		right: -(var.$popover-arrow-size);
		margin-bottom: #{var.$tooltip-arrow-size * 0.5};
		border-right-width: 0;
		border-left-color: var.$popover-border-color;

		&::after {
			right: 1px;
			bottom: -(var.$popover-arrow-size);
			margin-left: -(var.$popover-arrow-size);
			border-right-width: 0;
			border-left-color: var.$popover-background-color;
		}
	}
}