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

.lexicon-icon-arrows-all {
	background-color: unquote('hsl(from #{$white} h s l / 0.6)');
	border: 1px solid $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: $white;
	}
}

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

.clay-keyboard-arrows-vertical {
	.lx-arrows-all-keycap-left,
	.lx-arrows-all-keycap-right {
		fill: $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: $white;
	border-radius: 0.1413em; // matches `.lexicon-icon-arrows-all`
	position: absolute;

	// Position timing matches `$c-slideout-transition-in` so the
	// indicator slides in lockstep with a `VerticalBar` panel opening
	// rather than vanishing and reappearing at the new position. The
	// focus-within toggle stays instantaneous.
	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: $zindex-tooltip;

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

	// `tooltip` placement (default): the indicator sits next to the
	// anchor with a directional CSS-triangle arrow. The arrow's fill
	// matches the icon's semi-transparent white surface, with the icon's
	// border color outlining it.

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

		// Default: indicator sits to the right of the anchor, so the arrow
		// points left (toward the anchor).

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

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

		&.clay-keyboard-arrows-indicator-floating-flipped {
			// Flipped: indicator sits to the left of the anchor, so the
			// arrow points right (toward the anchor).

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

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

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

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

// Collapse Icon

a.collapse-icon,
button.collapse-icon,
.collapse-icon[tabindex] {
	padding-left: $collapse-icon-padding-left;
	padding-right: $collapse-icon-padding-right;

	@if ($enable-c-inner) {
		.c-inner {
			margin-left: if(
				$collapse-icon-padding-left,
				calc(#{$collapse-icon-padding-left} * -1),
				null
			);
			margin-right: if(
				$collapse-icon-padding-right,
				calc(#{$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: $collapse-icon-position-bottom;
		height: 1em;
		left: $collapse-icon-position-left;
		position: absolute;
		right: $collapse-icon-position-right;
		top: $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%);
	}
}

.lexicon-icon-sm {
	@include clay-css($lexicon-icon-sm);
}

.lexicon-icon-lg {
	@include clay-css($lexicon-icon-lg);
}

.lexicon-icon-xl {
	@include clay-css($lexicon-icon-xl);
}