@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";

.hoo-buttonicon{
	display: inline-flex;
	justify-content: center;

	padding: 0;
	padding: core.px2rem(4px);

	border: none;
	outline: none;
	background-color: transparent;
	color: colors.$neutral-700;

	align-items: center;

	cursor: pointer;
	svg{
		width: 16px;
		height: 16px;
	}
	&:hover{
		background-color: colors.$neutral-100;
	}
	&:active{
		background-color: colors.$neutral-200;
	}
	&[disabled],
	&:disabled {
		pointer-events: none;

		color: colors.$neutral-400;
		border-color: colors.$neutral-100;
		background-color: colors.$neutral-100;
	}
}