@import './FigmaIconsFont';

.figma-icon,
.figma-icon-button {
	font-family: 'FigmaIcons';
	color: #333;
	fill: #333;
	-webkit-font-smoothing: antialiased;
	display: flex;
	align-items: center;
	justify-content: center;
	&.disabled {
		fill: #d4d4d4;
		color: #d4d4d4;
	}
	&.close::after {
		content: '\103';
		font-size: 16px;
	}
	&.add::after {
		content: '\17b';
		font-size: 16px;
	}
	&.search::after {
		content: '\170';
		font-size: 18px;
		height: 8px;
	}
	&.more::after {
		content: '\1ea';
		font-size: 16px;
		height: 6px;
	}
	&.align-left::after {
		content: '\18b';
		font-size: 24px;
	}
	&.align-center::after {
		content: '\18d';
		font-size: 24px;
	}
	&.align-right::after {
		content: '\18f';
		font-size: 24px;
	}
	&.align-justified::after {
		content: '\191';
		font-size: 24px;
	}
	&.capitalize::after {
		content: '\181';
		font-size: 24px;
	}
	&.chevron-left::after {
		content: '\178';
		font-size: 24px;
	}
	&.chevron-left2::after {
		content: '\177';
		font-size: 24px;
		transform: rotate(180deg);
	}
	&.chevron-right::after {
		content: '\179';
		font-size: 24px;
	}
	&.chevron-right2::after {
		content: '\177';
		font-size: 24px;
	}
	&.chevron-down::after {
		content: '\17a';
		font-size: 24px;
	}
	&.chevron-up::after {
		content: '\17a';
		font-size: 24px;
		transform: rotate(180deg);
	}
	&.caret-right::after {
		content: '\16e';
		font-size: 16px;
	}
}

.figma-icon-button {
	height: 24px;
	width: 24px;
	border-radius: 3px;
	&:hover {
		background: #efefef;
		fill: #050505;
		color: #050505;
	}
	&.disabled {
		background: transparent;
	}
}
