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

.buttonIcon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	width: tokens.$coral-sizing-m;
	height: tokens.$coral-sizing-m;
	color: tokens.$coral-color-accent-icon;
	border-radius: tokens.$coral-radius-round;
	transition: tokens.$coral-transition-fast;
	flex-shrink: 0;

	&__icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;

		svg {
			pointer-events: none;
		}
	}

	&.size_S {
		width: tokens.$coral-sizing-s;
		height: tokens.$coral-sizing-s;
	}

	&.size_XS {
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;
		border-radius: tokens.$coral-radius-s;

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

	&.floating {
		background: tokens.$coral-color-neutral-background;
		box-shadow: tokens.$coral-elevation-shadow-neutral-m;
	}

	&.toggle {
		border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;

		&:hover {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-hover;
		}

		&:active {
			border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border-active;
		}

		&:disabled {
			border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
		}

		&[aria-pressed='true'] {
			color: tokens.$coral-color-accent-text-weak;
			background: tokens.$coral-color-accent-background-strong;

			&:hover {
				color: tokens.$coral-color-accent-text-weak-hover;
				background: tokens.$coral-color-accent-background-strong-hover;
			}

			&:active {
				color: tokens.$coral-color-accent-text-weak-active;
				background: tokens.$coral-color-accent-background-strong-active;
			}

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

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

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

	&:disabled {
		color: tokens.$coral-color-neutral-text-disabled;
		cursor: not-allowed;
	}
}