@use '@talend/design-tokens/lib/tokens' as tokens;

.button {
	padding: 0 tokens.$coral-spacing-xs;
	background: transparent;
	color: tokens.$coral-color-neutral-icon-weak;
	transition: tokens.$coral-transition-instant;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;

	&_readOnly {
		background: tokens.$coral-color-neutral-background-strong;
	}

	&__icon {
		width: tokens.$coral-sizing-minimal;
		height: tokens.$coral-sizing-minimal;
	}

	&:hover {
		color: tokens.$coral-color-accent-icon-hover;
	}

	&:active {
		color: tokens.$coral-color-accent-icon-active;
	}

	&:disabled {
		color: tokens.$coral-color-neutral-text-disabled;

		.button__icon {
			opacity: tokens.$coral-opacity-s;
		}
	}
}