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

.@{prefix}-DotsIcon {

	&-color-neutral-dark {
		fill: @color-neutral-9;

		&.@{prefix}-Icon-is-clickable:hover {
	 		fill: darken(@color-neutral-9, 7%);
	 	}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-neutral-light {
		fill: @color-neutral-6;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-neutral-6, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-primary {
		fill: @color-primary;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-primary, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-white {
		fill: @color-white;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-white, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-success {
		fill: @featured-color-success;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@featured-color-success, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-warning {
		fill: @featured-color-warning;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@featured-color-warning, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-secondary-one {
		fill: @color-secondary-1;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-secondary-1, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
 	}

	&-color-secondary-two {
		fill: @color-secondary-2;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-secondary-2, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}

	&-color-secondary-three {
		fill: @color-secondary-3;

		&.@{prefix}-Icon-is-clickable:hover {
			fill: darken(@color-secondary-3, 7%);
		}

		&.@{prefix}-Icon-is-disabled {
			fill: @color-darkGray;
		}
	}
}