// =============================================================================
// components/_button.scss
// =============================================================================

// Extend Bulma's .button with our colour tokens.
.button.is-primary {
	background-color: var(--color-primary);
	border-color: transparent;
	color: #fff;

	&:hover {
		background-color: var(--color-primary-dark);
	}
}

// Copy-code button on code blocks.
.copy-code-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	color: #e0e0e0;
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	transition: background var(--transition-base);

	&:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	&.is-copied {
		color: var(--color-success);
		border-color: var(--color-success);
	}
}