@use "../../styles/variables" as *;

.wcgs-help-tip {
	position: relative;
	flex: 0 0 15px;
	color: $wcgs-faint;
	cursor: help;

	&:focus {
		outline: none;
	}

	&__box {

		@include wcgs-tip;
		top: calc(100% + 6px);
		display: block;
		width: 280px;
		max-width: calc(100vw - 48px);
		box-sizing: border-box;
		padding: 8px 11px;
		line-height: 1.5;
		white-space: normal;

		&.is-start {
			left: -8px;
			transform: translateY(-3px);
		}

		&.is-end {
			left: auto;
			right: -8px;
			transform: translateY(-3px);
		}
	}

	&:hover &__box,
	&:focus-visible &__box {

		@include wcgs-tip-visible;

		&.is-start,
		&.is-end {
			transform: none;
		}
	}
}