@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@Icon-color-badgeBackground: @color-mediumGray;

.lucid-Icon {
	.no-firefox-svg-aliasing();

	display: inline-block;
	vertical-align: top; /* Prevents automatic addition of bottom margin. */
	fill: @color-primary;

	> path,
	> rect,
	> circle {
		transform-origin: center center;
	}

	&-is-badge {
		background-color: @Icon-color-badgeBackground;
		border: 1px solid @color-transparent;
		fill: @color-white;
	}

	&-is-clickable {
		cursor: pointer;
		fill: @color-linkColor;

		&:hover {
			fill: @color-linkColorHover;
		}
	}

	&-is-disabled {
		.opacity(.35);

		fill: @color-disabledText;
		cursor: not-allowed;
	}
}