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

// Resting shadow of the tab (kept on focus, under the focus ring).
$wcgs-tab-shadow: -6px 2px 14px -4px rgba(16, 17, 20, 0.14);

.wcgs-panel-tab {

	@include wcgs-reset-button;
	position: absolute;
	top: -1px;
	left: -22px;
	z-index: 12;
	width: 22px;
	height: 68px;
	padding: 0 0 0 1px;
	border: 1px solid $wcgs-divider;
	border-right: 0;
	border-radius: 9px 0 0 9px;
	background: #fff;
	color: $wcgs-accent;
	box-shadow: $wcgs-tab-shadow;
	transition:
		left 260ms $wcgs-ease-out,
		width 260ms $wcgs-ease-out,
		background-color 160ms $wcgs-ease,
		box-shadow 200ms $wcgs-ease,
		opacity 200ms $wcgs-ease;

	// Hides the panel's left border behind the tab so they read as one piece.
	&::after {
		content: "";
		position: absolute;
		right: -1px;
		top: 8px;
		bottom: 8px;
		width: 2px;
		background: #fff;
	}

	svg {
		transition: transform 260ms $wcgs-ease-out;
	}

	&:hover {
		left: -25px;
		width: 25px;
		background: #f7f4ff;
		box-shadow: -8px 3px 18px -4px rgba(124, 58, 237, 0.22);

		svg {
			transform: translateX(2px);
		}
	}

	&.is-left:hover svg {
		transform: translateX(-2px);
	}

	&:active {
		background: #efe9fe;
	}

	&:focus {
		box-shadow: $wcgs-tab-shadow;
	}

	&:focus-visible {
		box-shadow:
			$wcgs-tab-shadow,
			$wcgs-focus-ring;
	}

	&.is-hidden {
		opacity: 0;
		pointer-events: none;
	}

	&__tip {
		position: absolute;
		right: calc(100% + 8px);
		top: 50%;
		height: 28px;
		padding: 0 10px;
		border-radius: 6px;
		background: $wcgs-text;
		color: #fff;
		font-size: 12.5px;
		font-weight: 500;
		white-space: nowrap;
		box-shadow: $wcgs-tip-shadow;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translate(4px, -50%);
		transition:
			opacity 140ms $wcgs-ease,
			transform 180ms $wcgs-ease,
			visibility 0s linear 140ms;
	}

	&:hover &__tip {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
		transition:
			opacity 140ms $wcgs-ease 300ms,
			transform 180ms $wcgs-ease 300ms,
			visibility 0s linear 300ms;
	}

	&__key {
		height: 18px;
		padding: 0 5px;
		border-radius: 3px;
		background: rgba(255, 255, 255, 0.14);
		color: #d4d4d8;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 11px;
		font-weight: 600;
		box-shadow: none;
	}
}