$c-icon-button-size: 40px;

.c-icon-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: $c-icon-button-size;
	height: $c-icon-button-size;
	color: palette(action);
	border: 1px solid rgba(palette(action), 0.3);
	border-radius: 100%;
	transition-property: color, background-color, border, box-shadow;
	transition-duration: 0.25s;
	outline: none;

	&:hover {
		color: palette(neutral, 0);
		background-color: palette(action);
		border-color: transparent;
		cursor: pointer;
	}

	&:active {
		background-color: scale-color(palette(action), $lightness: -30%);
		color: palette(neutral, 0);
	}

	&:focus {
		@include box-shadow(low);
	}

	&[data-icon-direction="reverse"] {
		transform: rotate(0.5turn);
	}
}