// ================================================================================
// + Arrows
// --------------------------------------------------------------------------------

$Arrow-Bar_Width: 40px;
$Arrow-Icon_Size: $Arrow-Bar_Width;

@mixin Arrow-Icon() { // [NOTE] It is for `::before` pseudo element.
	display: block;
	margin: auto;
	@include size($Arrow-Icon_Size);
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	color: white;//rgb(96,96,96);
	background: black;
	// --------
	font: #{$Arrow-Icon_Size} / 1em "Material Icons";
	-ms-font-feature-settings: 'liga' 1; font-feature-settings: 'liga'; text-transform: none;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility;
	speak: none; direction: ltr; letter-spacing: 0; white-space: nowrap; word-wrap: normal; overflow-wrap: normal;
}

@mixin Arrow-Icon-L() { // [NOTE] It extends Arrow-Icon() for the left direction. You can use an image instead of a font using `content` or `background`.
	content: "chevron_left";
	text-indent: -.03em;
}

@mixin Arrow-Icon-R() { // [NOTE] It extends Arrow-Icon() for the right direction. You can use an image instead of a font using `content` or `background`.
	content: "chevron_right";
	text-indent:.03em;
}

@mixin Arrow-Icon-T() { // [NOTE] It extends Arrow-Icon() for the top direction. You can use an image instead of a font using `content` or `background`.
	content: "expand_less";
	line-height: $Arrow-Icon_Size * .97;
}

@mixin Arrow-Icon-B() { // [NOTE] It extends Arrow-Icon() for the bottom direction. You can use an image instead of a font using `content` or `background`.
	content: "expand_more";
	line-height: $Arrow-Icon_Size * 1.03;
}