.lexicon-icon {
	@include clay-css(setter($cadmin-lexicon-icon, ()));
}

.lexicon-icon-arrows-all {
	background-color: unquote('hsl(from #{$cadmin-white} h s l / 0.6)');
	border: 1px solid $cadmin-border-color;
	border-radius: 0.1413em; // 6.5/46
	height: 0.73913em; // 34/46 aspect ratio
	margin-top: 0;
	width: 1em;

	.lx-arrows-all-chevron {
		fill: $cadmin-white;
	}
}

.clay-keyboard-arrows-horizontal {
	.lx-arrows-all-keycap-down,
	.lx-arrows-all-keycap-up {
		fill: $cadmin-gray-300;
	}
}

.clay-keyboard-arrows-vertical {
	.lx-arrows-all-keycap-left,
	.lx-arrows-all-keycap-right {
		fill: $cadmin-gray-300;
	}
}

.clay-keyboard-arrows-indicator {
	display: inline-flex;
	font-size: 2.875rem; // 46px — natural design size

	.lexicon-icon {
		margin-top: 0;
	}
}

.clay-keyboard-arrows-indicator-floating {
	background-color: $cadmin-white;
	border-radius: 0.1413em;
	position: absolute;
	transition:
		bottom 0.3s ease-in-out,
		left 0.3s ease-in-out,
		right 0.3s ease-in-out,
		top 0.3s ease-in-out;
	z-index: $cadmin-zindex-tooltip;

	&.clay-keyboard-arrows-indicator-floating-hidden {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}

	&.clay-keyboard-arrows-indicator-floating-tooltip {
		&::before,
		&::after {
			border-style: solid;
			content: '';
			height: 0;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
		}

		&::before {
			border-color: transparent $cadmin-border-color transparent
				transparent;
			border-width: 7px 7px 7px 0;
			left: -7px;
		}

		&::after {
			border-color: transparent $cadmin-white transparent transparent;
			border-width: 6px 6px 6px 0;
			left: -6px;
		}

		&.clay-keyboard-arrows-indicator-floating-flipped {
			&::before {
				border-color: transparent transparent transparent
					$cadmin-border-color;
				border-width: 7px 0 7px 7px;
				left: auto;
				right: -7px;
			}

			&::after {
				border-color: transparent transparent transparent $cadmin-white;
				border-width: 6px 0 6px 6px;
				left: auto;
				right: -6px;
			}
		}
	}
}

.order-arrow-down-active {
	.order-arrow-arrow-down {
		fill: $cadmin-order-arrow-down-active-color;
	}
}

.order-arrow-up-active {
	.order-arrow-arrow-up {
		fill: $cadmin-order-arrow-up-active-color;
	}
}

// Collapse Icon

a.collapse-icon,
button.collapse-icon {
	padding-left: $cadmin-collapse-icon-padding-left;
	padding-right: $cadmin-collapse-icon-padding-right;

	@if ($cadmin-enable-c-inner) {
		.c-inner {
			margin-left: if(
				$cadmin-collapse-icon-padding-left,
				calc(#{$cadmin-collapse-icon-padding-left} * -1),
				null
			);
			margin-right: if(
				$cadmin-collapse-icon-padding-right,
				calc(#{$cadmin-collapse-icon-padding-right} * -1),
				null
			);
		}
	}
}

.collapse-icon-closed,
.collapse-icon-open {
	.lexicon-icon {
		display: block;
	}
}

.collapse-icon {
	.collapse-icon-closed,
	.collapse-icon-open {
		bottom: $cadmin-collapse-icon-position-bottom;
		height: 1em;
		left: $cadmin-collapse-icon-position-left;
		position: absolute;
		right: $cadmin-collapse-icon-position-right;
		top: $cadmin-collapse-icon-position-top;
		width: 1em;

		.lexicon-icon {
			margin-top: 0;
		}
	}

	.collapse-icon-closed {
		display: none;
	}

	.collapse-icon-open {
		display: inline-block;
	}
}

.collapsed {
	.collapse-icon-closed {
		display: inline-block;
	}

	.collapse-icon-open {
		display: none;
	}
}

.collapse-icon.collapse-icon-middle {
	.collapse-icon-closed,
	.collapse-icon-open {
		margin-top: 0;
		top: 50%;

		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}