@use "../mixins" as *;

.teaching-tip- {
	&wrapper {
		display: inline-block;
		inline-size: fit-content;
		block-size: fit-content;
		position: relative;
	}

	&backdrop {
		position: fixed;
		top: 0;
		left: 0;
		inline-size: 100%;
		block-size: 100%;
		z-index: 9999;
	}

	&content {
		position: relative;
		@include flex($direction: column, $justify: start, $align: start);
		padding: 9px 12px 11px 12px;
	}

	&footer {
		margin-block-start: 8px;
		display: grid;
		grid-auto-rows: 1fr;
		grid-auto-flow: column;
		grid-gap: 8px;
		white-space: nowrap;
		width: 100%;

		> :global(.button:only-child) {
			inline-size: 50%;
			justify-self: end;
		}
	}

	&image {
		display: block;
		max-inline-size: 100%;
		max-block-size: 100%;
		position: relative;
		z-index: 10;

		&.placement- {
			&top {
				margin-block-end: 4px;
				border-radius: var(--overlay-corner-radius) var(--overlay-corner-radius) 0 0;
			}

			&bottom {
				margin-block-start: 4px;
				border-radius: 0 0 var(--overlay-corner-radius) var(--overlay-corner-radius);
			}
		}
	}

	&caret {
		position: absolute;
		z-index: 10000;
		color: var(--solid-background-quarternary);

		& .stroke {
			color: var(--surface-stroke-default);
		}
	}

	&anchor {
		position: absolute;
		z-index: 10000;
		transform: var(--teaching-tip-transform);

		:global(.teaching-tip-close-button) {
			position: absolute;
			inset-block-start: 6px;
			inset-inline-end: 6px;
			color: var(--text-primary);
			z-index: 5;

			& :global(svg) {
				inline-size: 12px;
				block-size: 12px;
			}
		}

		&.placement- {
			--teaching-tip-transform: translateX(0%);

			--caret-left: 50%;
			--caret-right: auto;
			--caret-top: 50%;
			--caret-bottom: auto;
			--caret-translate-x: -50%;
			--caret-translate-y: -50%;

			--transform-origin-x: 50%;
			--transform-origin-y: 50%;

			&top {
				& .teaching-tip-caret {
					bottom: -8px;
					left: var(--caret-left);
					right: var(--caret-right);
					transform: translate(var(--caret-translate-x), 0%) rotate(0deg);
				}

				transform-origin: var(--transform-origin-x) bottom;
				bottom: calc(100% + var(--fds-teaching-tip-offset));
				--teaching-tip-transition-offset: translateY(12px);
			}

			&bottom {
				& .teaching-tip-caret {
					top: -8px;
					left: var(--caret-left);
					right: var(--caret-right);
					transform: translate(var(--caret-translate-x), 0%) rotate(180deg);
				}

				transform-origin: var(--transform-origin-x) top;
				top: calc(100% + var(--fds-teaching-tip-offset));
				--teaching-tip-transition-offset: translateY(-12px);
			}

			&left {
				& .teaching-tip-caret {
					right: -11px;
					top: var(--caret-top);
					bottom: var(--caret-bottom);
					transform: translate(0%, var(--caret-translate-y)) rotate(270deg);
				}

				transform-origin: right var(--transform-origin-y);
				right: calc(100% + var(--fds-teaching-tip-offset));
				--teaching-tip-transition-offset: translateX(12px);
			}

			&right {
				& .teaching-tip-caret {
					left: -11px;
					top: var(--caret-top);
					bottom: var(--caret-bottom);
					transform: translate(0%, var(--caret-translate-y)) rotate(90deg);
				}

				transform-origin: left var(--transform-origin-y);
				left: calc(100% + var(--fds-teaching-tip-offset));
				--teaching-tip-transition-offset: translateX(-12px);
			}

			&top,
			&bottom {
				&.alignment- {
					&start {
						inset-inline-start: 0;
						--teaching-tip-transform: translateX(0%);
						--caret-left: calc(var(--fds-trigger-width, 32px) / 2);
						--caret-right: auto;
						--caret-translate-x: -50%;

						--transform-origin-x: calc(var(--fds-trigger-width, 32px) / 2);
					}

					&end {
						inset-inline-end: 0;
						--teaching-tip-transform: translateX(0%);
						--caret-left: auto;
						--caret-right: calc(var(--fds-trigger-width, 32px) / 2);
						--caret-translate-x: 50%;

						--transform-origin-x: calc(100% - (var(--fds-trigger-width, 32px) / 2));
					}

					&center {
						inset-inline-start: 50%;
						--teaching-tip-transform: translateX(-50%);
						--caret-left: 50%;
						--caret-right: auto;
						--caret-translate-x: -50%;

						--transform-origin-x: 50%;
					}
				}
			}

			&left,
			&right {
				&.alignment- {
					&start {
						inset-block-start: 0;
						--teaching-tip-transform: translateY(0%);
						--caret-top: calc(var(--fds-trigger-height, 32px) / 2);
						--caret-bottom: auto;
						--caret-translate-y: -50%;

						--transform-origin-y: calc(var(--fds-trigger-height, 32px) / 2);
					}

					&end {
						inset-block-end: 0;
						--teaching-tip-transform: translateY(0%);
						--caret-top: auto;
						--caret-bottom: calc(var(--fds-trigger-height, 32px) / 2);
						--caret-translate-y: 50%;

						--transform-origin-y: calc(100% - (var(--fds-trigger-height, 32px) / 2));
					}

					&center {
						inset-block-start: 50%;
						--teaching-tip-transform: translateY(-50%);
						--caret-top: 50%;
						--caret-bottom: auto;
						--caret-translate-y: -50%;

						--transform-origin-y: 50%;
					}
				}
			}
		}
	}
}