@import "@Themes/constants.scss";

.root {
	cursor: pointer;
	border-radius: var(--button-icon-button-radius, 8px);
	display: inline-flex;
	padding: var(--spacing-sm, 8px);
	align-items: flex-start;

	svg {
		width: 24px;
		min-width: 24px;
		stroke: var(--button-icon-button-default-default);
	}

	&:hover {
		svg {
			stroke: var(--button-icon-button-default-hovered);
		}
	}

	&.neutral {
		background: var(--button-icon-button-neutral-default);

		svg {
			stroke: var(--button-icon-button-default-default);
		}

		&:hover {
			background: var(--button-icon-button-neutral-hovered);

			svg {
				stroke: var(--button-icon-button-default-hovered);
			}
		}
	}

	&.primary {
		background: var(--button-icon-button-primary-default);

		svg {
			stroke: var(--button-icon-button-primary-contrast);
		}

		&:hover {
			background: var(--button-icon-button-primary-hovered);
		}
	}

	&.error {
		background: var(--button-icon-button-error-default);

		svg {
			stroke: var(--button-icon-button-error-contrast);
		}

		&:hover {
			background: var(--button-icon-button-error-hovered);
		}
	}
	&.success {
		background: var(--button-icon-button-success-default);

		svg {
			stroke: var(--button-icon-button-success-contrast);
		}

		&:hover {
			background: var(--button-icon-button-success-hovered);
		}
	}

	&.warning {
		background: var(--button-icon-button-warning-default);

		svg {
			stroke: var(--button-icon-button-warning-contrast);
		}

		&:hover {
			background: var(--button-icon-button-warning-hovered);
		}
	}

	&.info {
		background: var(--button-icon-button-info-default);

		svg {
			stroke: var(--button-icon-button-info-contrast);
		}

		&:hover {
			background: var(--button-icon-button-info-hovered);
		}
	}

	&.default {
		padding: 0;
	}

	&.disabled {
		cursor: default;
		opacity: var(--opacity-disabled, 0.3);
	}
}