/*!
* Components/XIcon
*/

.x-icon {
	--x-icon-end-offset: var(--x-comp-icon-end-offset, 0.5rem);
	--x-icon-letter-spacing: var(--x-comp-icon-letter-spacing, normal);
	--x-icon-line-height: var(--x-comp-icon-line-height, 1);
	--x-icon-size: var(--x-comp-icon-size, 1em);
	--x-icon-size-reducer: var(--x-comp-icon-size-reducer, 0.25em);
	--x-icon-size-x-small-multiplier: var(--x-comp-icon-size-x-small-multiplier, 0);
	--x-icon-size-small-multiplier: var(--x-comp-icon-size-small-multiplier, 1);
	--x-icon-size-default-multiplier: var(--x-comp-icon-size-default-multiplier, 2);
	--x-icon-size-large-multiplier: var(--x-comp-icon-size-large-multiplier, 3);
	--x-icon-size-x-large-multiplier: var(--x-comp-icon-size-x-large-multiplier, 4);
	--x-icon-start-offset: var(--x-comp-icon-start-offset, 0.5rem);
	--x-icon-text-indent: var(--x-comp-icon-text-indent, 0);
	--x-icon-vertical-align: var(--x-comp-icon-vertical-align, middle);
}

.x-icon {
	--x-icon-size-multiplier: 1;
	align-items: center;
	display: inline-flex;
	font-feature-settings: "liga";
	font-size: inherit;
	height: var(--x-icon-size);
	justify-content: center;
	letter-spacing: var(--x-icon-letter-spacing);
	line-height: var(--x-icon-line-height);
	position: relative;
	text-indent: var(--x-icon-text-indent);
	user-select: none;
	vertical-align: var(--x-icon-vertical-align);
	width: var(--x-icon-size);
}

.x-icon > svg {
	fill: currentColor;
	height: 100%;
	width: 100%;
}

.x-icon--clickable {
	cursor: pointer;
}

@supports selector(:focus-visible) {
	.x-icon--clickable::after {
		border: 0.125rem solid currentColor;
		border-radius: inherit;
		opacity: 0;
		pointer-events: none;
		transition-duration: var(--x-sys-state-focus-layer-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
		transition-property: opacity;
		transition-timing-function: var(--x-sys-state-focus-layer-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		.x-icon--clickable::after {
			transition-delay: 0s;
			transition-duration: 0s;
		}
	}

	.x-icon--clickable:focus-visible::after {
		opacity: calc(0.25 * var(--x-sys-overlay-multiplier));
	}
}

.x-icon--start {
	margin-inline-end: var(--x-icon-start-offset);
}

.x-icon--end {
	margin-inline-start: var(--x-icon-end-offset);
}

.x-icon--size-x-small {
	font-size: calc(var(--x-icon-size-multiplier) * (var(--x-icon-size) + var(--x-icon-size-reducer) * var(--x-icon-size-x-small-multiplier)));
}

.x-icon--size-small {
	font-size: calc(var(--x-icon-size-multiplier) * (var(--x-icon-size) + var(--x-icon-size-reducer) * var(--x-icon-size-small-multiplier)));
}

.x-icon--size-default {
	font-size: calc(var(--x-icon-size-multiplier) * (var(--x-icon-size) + var(--x-icon-size-reducer) * var(--x-icon-size-default-multiplier)));
}

.x-icon--size-large {
	font-size: calc(var(--x-icon-size-multiplier) * (var(--x-icon-size) + var(--x-icon-size-reducer) * var(--x-icon-size-large-multiplier)));
}

.x-icon--size-x-large {
	font-size: calc(var(--x-icon-size-multiplier) * (var(--x-icon-size) + var(--x-icon-size-reducer) * var(--x-icon-size-x-large-multiplier)));
}