@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

/* stylelint-disable max-nesting-depth, selector-max-specificity  */

$popover-background-color: tokens.$body-background !default;
$popover-border: tokens.$border-width solid tokens.$border !default;
$popover-border-radius: tokens.$border-radius !default;
$popover-shadow: tokens.$box-shadow-heavy !default;
$popover-width: 224px !default;

$popover-chevron-color: tokens.$border !default;

.popover {
	display: inline-block;
	position: relative;

	summary {
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.popover-content {
		position: absolute;
		width: $popover-width;
		padding: tokens.$spacer-5;
		transform: none;
		inset-inline-start: 0;
		border: $popover-border;
		border-radius: $popover-border-radius;
		background-color: $popover-background-color;
		box-shadow: $popover-shadow;

		// hide popover until after position is calculated, then show
		visibility: hidden;
		z-index: tokens.$zindex-popover;
	}

	&.popover-top {
		.popover-content {
			inset-block-end: 100%;
			margin-block-end: tokens.$spacer-3;
		}
	}

	&.popover-caret {
		.popover-content {
			margin-block-start: 0;
			overflow: visible;

			&::before {
				@include mixins.chevron-up;

				position: absolute;
				inset-inline-start: var(--caret-left, 50%);
				inset-inline-end: auto;
				inset-block-start: calc(mixins.$chevron-arrow-size / -1.75);
				border-color: $popover-chevron-color;
				background-color: $popover-background-color;
				z-index: 2;
			}

			[dir='rtl'] & {
				&::before {
					transform: rotate(-135deg);
					inset-inline-start: var(--caret-left, 50%);
					inset-inline-end: var(--caret-left, 50%);
				}
			}
		}
	}

	&.popover-caret.popover-caret-bottom {
		.popover-content {
			margin-block-start: 0;
			margin-block-end: tokens.$spacer-3;
			overflow: visible;

			&::before {
				@include mixins.chevron-down;

				position: absolute;
				inset-inline-start: var(--caret-left, 50%);
				inset-inline-end: auto;
				inset-block-start: auto;
				inset-block-end: calc(mixins.$chevron-arrow-size / -1.75);
				border-color: $popover-chevron-color;
				background-color: $popover-background-color;
				z-index: 2;
			}

			[dir='rtl'] & {
				&::before {
					transform: rotate(45deg);
					inset-inline-start: var(--caret-left, 50%);
					inset-inline-end: var(--caret-left, 50%);
				}
			}
		}
	}
}

/* stylelint-enable selector-max-specificity, max-nesting-depth */