popover-card.scss

@import "../style/base";
@import "popover-card-vars";

:host {
	--card-elevation: #{$popover-card-elevation};

	display: flex;
	flex-direction: var(--_flex-direction, column);
}

#content {
	transform: translate(calc(#{$popover-card-arrow-width} * var(--_content-translate-x-multiplier, 0)), calc(#{$popover-card-arrow-width} * var(--_content-translate-y-multiplier, 0)));
	overflow: hidden;
}

#arrow {
	transform: rotate(var(--_arrow-rotation, 0deg)) translate(calc(50% * var(--_arrow-translate-x-multiplier, 0)), calc(50% * var(--_arrow-translate-y-multiplier, 0)));
	left: var(--_arrow-offset-x, unset);
	top: var(--_arrow-offset-y, unset);
	justify-self: var(--_justify-content, flex-start);
	align-self: var(--_align-items, flex-start);

	pointer-events: none;
	position: relative;
	width: $popover-card-arrow-width;
	height: $popover-card-arrow-height;
	fill: $popover-card-arrow-fill;
	z-index: 1;
	display: none;
}

// Only display the arrow if host-context is supported
:host-context([data-transform-origin-x][data-transform-origin-y]) #arrow {
	display: block;
}

// Position the arrow inside the arrow container according to the transform origin.
:host-context([data-transform-origin-x="left"]) {
	--_align-items: flex-start;
}

:host-context([data-transform-origin-x="center"]) {
	--_align-items: center;
}

:host-context([data-transform-origin-x="right"]) {
	--_align-items: flex-end;
}

:host-context([data-transform-origin-y="top"]) {
	--_justify-content: flex-start;
}

:host-context([data-transform-origin-y="center"]) {
	--_justify-content: center;
}

:host-context([data-transform-origin-y="bottom"]) {
	--_flex-direction: column-reverse;
}

// It doesn't make sense to show an arrow when the transform origin is in the center
:host-context([data-transform-origin-x="center"][data-transform-origin-y="center"]) {
	#arrow {
		display: none;
	}
}

// #####################################
// I LEARNED TO WRITE THE BELOW CODE IN A COURSE AT HOGWARTS. YES. MAGIC IS REAL.
// #####################################

// Top rules
:host-context([data-transform-origin-x="left"][data-transform-origin-y="top"]) {
	--_content-translate-x-multiplier: -2;
	--_arrow-translate-x-multiplier: -1;
}

:host-context([data-transform-origin-x="right"][data-transform-origin-y="top"]) {
	--_content-translate-x-multiplier: 2;
	--_arrow-translate-x-multiplier: 1;
}

// Bottom rules
:host-context([data-transform-origin-y="bottom"]) {
	--_arrow-rotation: 180deg;
}

:host-context([data-transform-origin-x="left"][data-transform-origin-y="bottom"]) {
	--_content-translate-x-multiplier: -2;
	--_arrow-translate-x-multiplier: 1;
}

:host-context([data-transform-origin-x="right"][data-transform-origin-y="bottom"]) {
	--_content-translate-x-multiplier: 2;
	--_arrow-translate-x-multiplier: -1;
}

:host-context([data-transform-origin-y="center"]) {
	--_arrow-translate-x-multiplier: 0;
}

// Center rules
:host-context([data-transform-origin-y="center"]) {
	--_align-items: center;
}

:host-context([data-transform-origin-x="left"][data-transform-origin-y="center"]) {
	--_flex-direction: row;
	--_arrow-rotation: -90deg;

	#content {
		transform: translateX(calc(((#{$popover-card-arrow-width} - #{$popover-card-arrow-height}) / 2) * -1));
	}
}

:host-context([data-transform-origin-x="right"][data-transform-origin-y="center"]) {
	--_flex-direction: row-reverse;
	--_arrow-rotation: 90deg;

	#content {
		transform: translateX(calc((#{$popover-card-arrow-width} - #{$popover-card-arrow-height}) / 2));
	}
}