@import "/ui/styles/_theme.scss";

@keyframes dock-fab-pulse {
	0%   { background-color: $primary;        box-shadow: 0 0 0 rgba(0, 0, 0, 0.0); }
	50%  { background-color: $primary-strong; box-shadow: 0 0 18px $primary-line; }
	100% { background-color: $primary;        box-shadow: 0 0 0 rgba(0, 0, 0, 0.0); }
}

.dock-fab {
	pointer-events: all;
	position: absolute;
	left: 24px;
	top: -72px;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background-color: $primary;
	border: 1px solid $primary-strong;
	color: $text;
	cursor: pointer;
	font-family: $font-mono;
	font-size: $fs-2;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	z-index: 40;
	animation-name: dock-fab-pulse;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	transition: color 0.1s ease, border-color 0.1s ease, padding 0.1s ease;

	.dock-fab-icon {
		font-size: $fs-4;
		font-weight: 800;
		font-family: $font-secondary;
		color: $text;
	}

	.dock-fab-label {
		font-family: $font-mono;
	}

	&:hover {
		border-color: $primary-ink;
		padding: 10px 24px;
		color: $text;
	}

	&.is-quiet {
		animation-name: none;
	}

	&.active {
		animation-name: none;
		background-color: $bg-elev;
		border-color: $primary-strong;
		color: $primary-ink;

		.dock-fab-icon { color: $primary-ink; }

		&:hover {
			border-color: $primary-ink;
			color: $text;

			.dock-fab-icon { color: $text; }
		}
	}

	&.is-loading {
		animation-name: none;
		background-color: $bg-elev;
		border-color: $primary-strong;
		color: $primary-ink;
		opacity: 0.7;

		.dock-fab-icon { color: $primary-ink; }
	}

	&.is-disabled {
		pointer-events: none;
		cursor: default;
	}
}