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

.btn {
	pointer-events: all;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: $dock-input-h;
	padding: 0 16px;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	color: $text;
	cursor: pointer;
	font-size: $fs-2;
	font-weight: 700;
	font-family: $font-mono;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color 0.08s ease, color 0.08s ease, border-color 0.08s ease;

	&:hover {
		background-color: $bg-elev;
		border-color: $primary;
		color: $primary;
	}

	&.danger {
		color: $danger;
		border-color: $danger-line;
		&:hover { background-color: $danger-soft; border-color: $danger; color: $danger; }
	}

	&.primary {
		background-color: $primary;
		border-color: $primary;
		color: $primary-ink;
		&:hover { background-color: $primary-strong; border-color: $primary-strong; color: $primary-ink; }
	}

	&.is-disabled {
		background-color: $bg-2;
		border-color: $line;
		color: $text-mute;
		cursor: default;
		opacity: 0.6;

		&:hover {
			background-color: $bg-2;
			border-color: $line;
			color: $text-mute;
		}
	}

	&.is-loading {
		color: $primary;
		border-color: $primary;
	}
}