/* 툴팁 */
//사이즈 정의
@mixin tooltip-size-variable() {
	--krds-tooltip--popover-radius: var(--krds-radius-small3);
	--krds-tooltip--popover-radius-box: var(--krds-radius-xlarge2);
	--krds-tooltip--popover-contents-pc-font-size: var(--krds-pc-font-size-body-small);
	--krds-tooltip--popover-contents-mobile-font-size: var(--krds-mobile-font-size-body-small);
	--krds-tooltip--popover-margin-x: 2.4rem;
}

//컬러 정의
@mixin tooltip-color-variable($mode: light) {
	--krds-tooltip--popover-inline-color-text: var(--krds-#{$mode}-color-text-basic-inverse);
	--krds-tooltip--popover-box-color-text: var(--krds-#{$mode}-color-text-basic);
	--krds-tooltip--popover-color-border: var(--krds-#{$mode}-color-border-gray);
	--krds-tooltip--popover-color-surface: var(--krds-#{$mode}-color-surface-inverse);
	--krds-tooltip--popover-box-color-surface: var(--krds-#{$mode}-color-surface-white-subtler);
}

//모드 설정
$mode-setting: light;
.krds-tooltip-popover {
	@include tooltip-size-variable();
	@include tooltip-color-variable(#{$mode-setting});

	display: none;
	position: fixed;
	z-index: 100;
	white-space: nowrap;
	font-size: var(--krds-tooltip--popover-contents-pc-font-size);
	border-radius: var(--krds-tooltip--popover-radius);
	padding: var(--krds-padding-2) var(--krds-padding-5);
	color: var(--krds-tooltip--popover-inline-color-text);
	background-color: var(--krds-tooltip--popover-color-surface);
  top: 0;
  left: 0;
	&.active {
		display: block;
	}
	&::before {
		--tooltip-arrow-size: 0.8rem;
		--tooltip-arrow-gap: calc((var(--tooltip-arrow-size) / 2) * -1);
		@include pseudo();
		@include square(var(--tooltip-arrow-size));
		display: block;
		position: absolute;
		background-color: var(--krds-tooltip--popover-color-surface);
		left: var(--tooltip-arrow-gap);
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
	&.tooltip-box {
		white-space: normal;
		max-width: 36rem;
		border: 0.1rem solid var(--krds-tooltip--popover-color-border);
		border-radius: var(--krds-tooltip--popover-radius-box);
		padding: var(--krds-padding-8);
		color: var(--krds-tooltip--popover-box-color-text);
		background-color: var(--krds-tooltip--popover-box-color-surface);
		&::before {
			--tooltip-arrow-size: 1.2rem;
			border: 0.1rem solid var(--krds-tooltip--popover-color-border);
			border-top-color: transparent;
			border-left-color: transparent;
			background-color: var(--krds-tooltip--popover-box-color-surface);
		}
	}
	&.right {
		&::before {
			left: calc(100% + var(--tooltip-arrow-gap));
		}
	}
	&.bottom,
	&.top {
		&::before {
			top: calc(100% + var(--tooltip-arrow-gap));
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
		}
		&.right {
			&::before {
				left: calc(100% - var(--krds-tooltip--popover-margin-x));
			}
		}
		&.left {
			&::before {
				left: var(--krds-tooltip--popover-margin-x);
			}
		}
	}
	&.bottom {
		&::before {
			top: var(--tooltip-arrow-gap);
		}
		&.tooltip-box {
			&::before {
				transform: translateX(-50%) rotate(-135deg);
			}
		}
	}
}

//고대비모드
@include color-mode($mode: high-contrast) {
	//모드 설정
	$mode-setting: high-contrast;
	.krds-tooltip-popover {
		@include tooltip-color-variable(#{$mode-setting});
	}
}

//responsive mobile
@include size-medium {
	.krds-tooltip-popover {
		font-size: var(--krds-tooltip--popover-contents-mobile-font-size);
	}
}

@media (max-width: 420px) {
	.krds-tooltip-popover {
		width: calc(100% - (var(--krds-contents-padding-x) * 2));
		@include position-center(x);
		&::before {
			display: none;
		}
		&.tooltip-box {
			max-width: 100%;
		}
	}
}