@use '../../../components/atoms/button' as *;
@use '../../../base/functions' as *;

// Labs ui specific variables

.button {
	font-family: var(--txt-body-family), monospace;
	border-radius: var(--radius-pill);

	&.primary {
		border-width: 0.0625rem;
		border-style: solid;
		background-color: var(--action);
		border-color: var(--action);

		// Disable BrandUI button animation
		&::before,
		&::after {
			content: unset;
		}

		&:hover,
		&:focus {
			background-color: var(--action-secondary);
		}

		.general-icon {
			color: var(--neutral-1);
		}
	}

	&.secondary {
		border-width: 0.0625rem;
		border-style: solid;
		transition:
			color var(--transition-fast),
			background-color var(--transition-fast),
			border-color var(--transition-fast);
		color: var(--action);
		background-color: var(--neutral-1);
		border-color: var(--action);

		// Disable BrandUI button animation
		&::before,
		&::after {
			content: unset;
		}

		&:hover,
		&:focus {
			color: var(--action-secondary);
			background-color: var(--neutral-2);
			border-color: var(--action-secondary);
		}
	}

	&.tertiary,
	&.glyph,
	&.arrow,
	&.external {
		color: var(--action);

		&:hover,
		&:focus {
			color: var(--action-secondary);
		}
	}
}

.copy-to-clipboard {
	&-body {
		border: 1px solid;
		border-color: var(--action);
	}

	.tooltip-wrapper {
		border-color: var(--action);

		&:hover {
			.general-icon {
				color: var(--ui-fill);
			}
		}

		.general-icon {
			color: var(--ui-fill);
		}
	}
}

.clipboard-trigger {
	background-color: var(--action);
	border-color: var(--action);

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