/* .btn = acción principal (tinta de acento)
   .btn-s = acción secundaria (borde)
   .btn-t = acción terciaria (texto) */
.btn,
.btn-s,
.btn-t {
	align-items: center;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	color: var(--on-accent) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.5rem;
	outline: none;
	padding: 0 1rem;
	position: relative;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	user-select: none;
	white-space: nowrap;

	&:visited,
	&:link {
		color: var(--on-accent) !important;
	}

	&:hover {
		background: var(--accent-hover);
		border-color: var(--accent-hover);
	}

	&:focus-visible {
		box-shadow: var(--focus);
	}

	/* Spinner para el estado .syncing */
	&::after {
		animation: rotate .5s linear infinite;
		border: .15rem solid currentColor;
		border-left-color: transparent;
		border-radius: 50%;
		content: "";
		display: inline-block;
		height: 1rem;
		left: calc(50% - .5rem);
		opacity: 0;
		position: absolute;
		top: calc(50% - .5rem);
		transition: opacity .15s;
		width: 1rem;
		z-index: 1;
	}

	&:disabled {
		opacity: .5;
		pointer-events: none;
	}

	&.syncing {
		color: transparent !important;
		pointer-events: none;
	}

	&.syncing::after {
		border-color: var(--on-accent);
		border-left-color: transparent;
		opacity: 1;
	}
}

.btn-s {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink) !important;

	&:visited,
	&:link {
		color: var(--ink) !important;
	}

	&:hover {
		background: var(--code-bg);
		border-color: var(--line-strong);
	}

	&.syncing::after {
		border-color: var(--ink);
		border-left-color: transparent;
	}
}

.btn-t {
	background: transparent;
	border-color: transparent;
	color: var(--accent) !important;

	&:visited,
	&:link {
		color: var(--accent) !important;
	}

	&:hover {
		background: var(--accent-soft);
		border-color: transparent;
	}
}

/* Botón oscuro (inicio de sesión) */
.btn-ink {
	background: var(--solid);
	border-color: var(--solid);
	color: var(--on-solid) !important;

	&:visited,
	&:link {
		color: var(--on-solid) !important;
	}

	&:hover {
		background: var(--solid-hover);
		border-color: var(--solid-hover);
	}
}

.btn-secondary {
	background: var(--surface) !important;
	border: 1px solid var(--line) !important;
	color: var(--ink) !important;
}

.btn-secondary:hover {
	background: var(--code-bg) !important;
}

.btn-secondary:visited,
.btn-secondary:link {
	color: var(--ink) !important;
}

.googleSignOut {
	background: var(--surface) !important;
	border: 1px solid var(--line) !important;
	color: var(--danger) !important;
}

.googleSignOut:hover {
	background: var(--danger-soft) !important;
	border-color: var(--danger) !important;
}

.googleSignOut:visited,
.googleSignOut:link {
	color: var(--danger) !important;
}