/*!
* Components/XBtn
*/

.x-btn {
	--x-btn-container-color: var(--x-comp-btn-container-color, var(--x-sys-color-surface));
	--x-btn-container-height: var(--x-comp-btn-container-height, 2.5rem);
	--x-btn-container-height-reducer: var(--x-comp-btn-container-height-reducer, 0.5rem);
	--x-btn-container-min-width: var(--x-comp-btn-container-min-width, 4rem);
	--x-btn-container-min-width-reducer: var(--x-comp-btn-container-min-width-reducer, 0.5rem);
	--x-btn-container-motion-duration: var(--x-comp-btn-container-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
	--x-btn-container-motion-easing: var(--x-comp-btn-container-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
	--x-btn-container-outline-color: var(--x-comp-btn-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-btn-container-outline-style: var(--x-comp-btn-container-outline-style, solid);
	--x-btn-container-outline-width: var(--x-comp-btn-container-outline-width, 0);
	--x-btn-container-underlay-opacity: var(--x-comp-btn-container-underlay-opacity, var(--x-sys-state-pressed-state-layer-opacity, 0.12));
	--x-btn-container-shadow-color: var(--x-comp-btn-container-shadow-color, var(--x-sys-color-shadow));
	--x-btn-container-shape: var(--x-comp-btn-container-shape, var(--sys-shape-corner-full, 999rem));
	--x-btn-density-compact-multiplier: var(--x-comp-btn-density-compact-multiplier, -3);
	--x-btn-density-comfortable-multiplier: var(--x-comp-btn-density-comfortable-multiplier, -2);
	--x-btn-density-default-multiplier: var(--x-comp-btn-density-default-multiplier, 0);
	--x-btn-density-reducer: var(--x-comp-btn-density-reducer, 0.25rem);
	--x-btn-disabled-container-color: var(--x-comp-btn-disabled-container-color, var(--x-sys-color-on-surface));
	--x-btn-disabled-container-elevation: var(--x-comp-btn-disabled-container-elevation, var(--x-elevation-level0));
	--x-btn-disabled-container-opacity: var(--x-comp-btn-disabled-container-opacity, var(--x-sys-state-disabled-container-opacity, 0.12));
	--x-btn-disabled-container-outline-color: var(--x-comp-btn-disabled-container-outline-color, rgb(var(--x-sys-color-on-surface)));
	--x-btn-disabled-container-outline-opacity: var(--x-comp-btn-disabled-container-outline-opacity, 0.12);
	--x-btn-disabled-label-text-color: var(--x-comp-btn-disabled-label-text-color, var(--x-sys-color-on-surface));
	--x-btn-disabled-label-text-opacity: var(--x-comp-btn-disabled-label-text-opacity, var(--x-sys-state-disabled-text-opacity, 0.38));
	--x-btn-elevated-container-elevation-level: var(--x-comp-btn-elevated-container-elevation-level, 1);
	--x-btn-elevated-hover-container-elevation-level: var(--x-comp-btn-elevated-hover-container-elevation-level, 2);
	--x-btn-elevated-focus-container-elevation-level: var(--x-comp-btn-elevated-focus-container-elevation-level, 1);
	--x-btn-elevated-pressed-container-elevation-level: var(--x-comp-btn-elevated-pressed-container-elevation-level, 1);
	--x-btn-filled-container-elevation-level: var(--x-comp-btn-filled-container-elevation-level, 0);
	--x-btn-filled-hover-container-elevation-level: var(--x-comp-btn-filled-hover-container-elevation-level, 1);
	--x-btn-filled-focus-container-elevation-level: var(--x-comp-btn-filled-focus-container-elevation-level, 0);
	--x-btn-filled-pressed-container-elevation-level: var(--x-comp-btn-filled-pressed-container-elevation-level, 0);
	--x-btn-focus-container-outline-color: var(--x-comp-btn-focus-container-outline-color, currentColor);
	--x-btn-hover-container-outline-color: var(--x-comp-btn-hover-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-btn-icon-container-shape: var(--x-comp-btn-icon-container-shape, var(--sys-shape-corner-full, 999rem));
	--x-btn-icon-icon-size: var(--x-comp-btn-icon-icon-size, 1.5rem);
	--x-btn-icon-icon-size-reducer: var(--x-comp-btn-icon-icon-size-reducer, 0.25rem);
	--x-btn-icon-icon-size-multiplier: var(--x-comp-btn-icon-icon-size-multiplier, 1);
	--x-btn-icon-size: var(--x-comp-btn-icon-size, 1.125rem);
	--x-btn-icon-size-reducer: var(--x-comp-btn-icon-size-reducer, 0.1875rem);
	--x-btn-icon-size-multiplier: var(--x-comp-btn-icon-size-multiplier, 0.8571428571);
	--x-btn-label-text-color: var(--x-comp-btn-label-text-color, var(--x-sys-color-on-surface));
	--x-btn-label-text-font: var(--x-comp-btn-label-text-font, inherit);
	--x-btn-label-text-motion-duration: var(--x-comp-btn-label-text-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
	--x-btn-label-text-motion-easing: var(--x-comp-btn-label-text-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
	--x-btn-label-text-size: var(--x-comp-btn-label-text-size, var(--x-sys-typescale-label-large-size, 0.875rem));
	--x-btn-label-text-size-reducer: var(--x-comp-btn-label-text-size-reducer, 0.125rem);
	--x-btn-label-text-weight: var(--x-comp-btn-label-text-weight, var(--x-sys-typescale-label-large-weight, 500));
	--x-btn-label-text-tracking: var(--x-comp-btn-label-text-tracking, var(--x-sys-typescale-label-large-tracking, 0.00625rem));
	--x-btn-label-text-line-height: var(--x-comp-btn-label-text-line-height, var(--x-sys-typescale-label-large-line-height, normal));
	--x-btn-label-text-transform: var(--x-comp-btn-label-text-transform, var(--x-sys-typescale-label-large-transform, none));
	--x-btn-label-text-white-space: var(--x-comp-btn-label-text-white-space, nowrap);
	--x-btn-outlined-container-outline-width: var(--x-comp-btn-outlined-container-outline-width, 0.0625rem);
	--x-btn-plain-container-opacity: var(--x-comp-btn-plain-container-opacity, 0.62);
	--x-btn-pressed-container-outline-color: var(--x-comp-btn-pressed-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-btn-rounded-container-shape: var(--x-comp-btn-rounded-container-shape, var(--sys-shape-corner-medium, 0.75rem));
	--x-btn-size-x-small-multiplier: var(--x-comp-btn-size-x-small-multiplier, -2);
	--x-btn-size-small-multiplier: var(--x-comp-btn-size-small-multiplier, -1);
	--x-btn-size-default-multiplier: var(--x-comp-btn-size-default-multiplier, 0);
	--x-btn-size-large-multiplier: var(--x-comp-btn-size-large-multiplier, 1);
	--x-btn-size-x-large-multiplier: var(--x-comp-btn-size-x-large-multiplier, 2);
	--x-btn-space-between: var(--x-comp-btn-space-between, 0.5rem);
	--x-btn-space-between-reducer: var(--x-comp-btn-space-between-reducer, 0.125rem);
	--x-btn-space-between-compensation: var(--x-comp-btn-space-between-compensation, -0.5rem);
	--x-btn-space-between-compensation-reducer: var(--x-comp-btn-space-between-compensation-reducer, -0.125rem);
	--x-btn-spacing: var(--x-comp-btn-spacing, 1.5rem);
	--x-btn-spacing-reducer: var(--x-comp-btn-spacing-reducer, 0.25rem);
	--x-btn-stacked-container-height: var(--x-comp-btn-stacked-container-height, 5rem);
	--x-btn-stacked-container-min-width: var(--x-comp-btn-stacked-container-min-width, 5rem);
	--x-btn-stacked-icon-size: var(--x-comp-btn-stacked-icon-size, 1.5rem);
	--x-btn-stacked-icon-size-multiplier: var(--x-comp-btn-stacked-icon-size-multiplier, 1.1428571429);
	--x-btn-stacked-icon-size-reducer: var(--x-comp-btn-stacked-icon-size-reducer, 0.25rem);
	--x-btn-stacked-label-text-size: var(--x-comp-btn-stacked-label-text-size, var(--x-sys-typescale-label-large-size, 0.875rem));
	--x-btn-stacked-spacing: var(--x-comp-btn-stacked-spacing, 1.5rem);
	--x-btn-stacked-label-text-line-height: var(--x-comp-btn-stacked-label-text-line-height, 1.5);
	--x-btn-stacked-space-between: var(--x-comp-btn-stacked-space-between, 0.25rem);
	--x-btn-state-layer-motion-duration: var(--x-comp-btn-state-layer-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
	--x-btn-state-layer-motion-easing: var(--x-comp-btn-state-layer-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
}

.x-btn {
	align-items: center;
	border-radius: var(--x-btn-container-shape);
	display: inline-grid;
	flex-shrink: 0;
	font-family: var(--x-btn-label-text-font);
	font-size: calc(var(--x-btn-label-text-size) + var(--x-btn-label-text-size-reducer) * var(--_x-btn-size-multiplier));
	font-weight: var(--x-btn-label-text-weight);
	grid-template-areas: "prepend content append";
	grid-template-columns: max-content auto max-content;
	justify-content: center;
	letter-spacing: var(--x-btn-label-text-tracking);
	line-height: var(--x-btn-label-text-line-height);
	max-inline-size: 100%;
	min-width: calc(var(--x-btn-container-min-width) + var(--x-btn-container-min-width-reducer) * var(--_x-btn-size-multiplier));
	outline: none;
	padding: 0 calc(var(--x-btn-spacing) + var(--x-btn-spacing-reducer) * var(--_x-btn-size-multiplier));
	position: relative;
	text-decoration: none;
	text-indent: var(--x-btn-label-text-tracking);
	text-transform: var(--x-btn-label-text-transform);
	transition-duration: var(--x-btn-container-motion-duration);
	transition-property: background, border-color, box-shadow, color, opacity, transform;
	transition-timing-function: var(--x-btn-container-motion-easing);
	user-select: none;
	vertical-align: middle;
	border-color: var(--x-btn-container-outline-color);
	border-style: var(--x-btn-container-outline-style);
	border-width: var(--x-btn-container-outline-width);
}

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

.x-btn .x-icon {
	--x-icon-size-multiplier: var(--x-btn-icon-size-multiplier);
}

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

.x-btn__prepend,
.x-btn__append,
.x-btn__content {
	align-items: center;
	display: flex;
	transition-duration: var(--x-btn-label-text-motion-duration);
	transition-property: opacity, transform;
	transition-timing-function: var(--x-btn-label-text-motion-easing);
}

@media (prefers-reduced-motion: reduce) {

	.x-btn__prepend,
	.x-btn__append,
	.x-btn__content {
		transition-delay: 0s;
		transition-duration: 0s;
	}
}

.x-btn__prepend {
	grid-area: prepend;
	margin-inline-end: calc(var(--x-btn-space-between) + var(--x-btn-space-between-reducer) * var(--_x-btn-size-multiplier));
	margin-inline-start: calc(var(--x-btn-space-between-compensation) + var(--x-btn-space-between-compensation-reducer) * var(--_x-btn-size-multiplier));
}

.x-btn__append {
	grid-area: append;
	margin-inline-end: calc(var(--x-btn-space-between-compensation) + var(--x-btn-space-between-compensation-reducer) * var(--_x-btn-size-multiplier));
	margin-inline-start: calc(var(--x-btn-space-between) + var(--x-btn-space-between-reducer) * var(--_x-btn-size-multiplier));
}

.x-btn__content {
	grid-area: content;
	justify-content: center;
	white-space: var(--x-btn-label-text-white-space);
}

.x-btn__content > .x-icon--start {
	margin-inline-end: calc(var(--x-btn-space-between) + var(--x-btn-space-between-reducer) * var(--_x-btn-size-multiplier));
	margin-inline-start: calc(var(--x-btn-space-between-compensation) + var(--x-btn-space-between-compensation-reducer) * var(--_x-btn-size-multiplier));
}

.x-btn__content > .x-icon--end {
	margin-inline-end: calc(var(--x-btn-space-between-compensation) + var(--x-btn-space-between-compensation-reducer) * var(--_x-btn-size-multiplier));
	margin-inline-start: calc(var(--x-btn-space-between) + var(--x-btn-space-between-reducer) * var(--_x-btn-size-multiplier));
}

.x-btn--stacked > .x-btn__content {
	white-space: normal;
}

.x-btn__loader {
	align-items: center;
	display: flex;
	justify-content: center;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.x-btn__overlay,
.x-btn__underlay {
	pointer-events: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.x-btn__overlay {
	background-color: currentColor;
	border-radius: inherit;
	opacity: 0;
	transition-duration: var(--x-btn-state-layer-motion-duration);
	transition-timing-function: var(--x-btn-state-layer-motion-easing);
}

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

@media (hover: hover) {
	.x-btn:hover > .x-btn__overlay {
		opacity: calc(var(--x-sys-state-hover-state-layer-opacity, 0.08) * var(--x-sys-state-layer-multiplier));
	}
}

.x-btn:focus-visible > .x-btn__overlay {
	opacity: calc(var(--x-sys-state-focus-state-layer-opacity, 0.12) * var(--x-sys-state-layer-multiplier));
}

@supports not selector(:focus-visible) {
	.x-btn:focus > .x-btn__overlay {
		opacity: calc(var(--x-sys-state-focus-state-layer-opacity, 0.12) * var(--x-sys-state-layer-multiplier));
	}
}

.x-btn--active > .x-btn__overlay,
.x-btn[aria-haspopup=menu][aria-expanded=true] > .x-btn__overlay {
	opacity: calc(var(--x-sys-state-pressed-state-layer-opacity, 0.12) * var(--x-sys-state-layer-multiplier));
}

.x-btn--active:hover > .x-btn__overlay,
.x-btn[aria-haspopup=menu][aria-expanded=true]:hover > .x-btn__overlay {
	opacity: calc((var(--x-sys-state-pressed-state-layer-opacity, 0.12) + var(--x-sys-state-hover-state-layer-opacity, 0.08)) * var(--x-sys-state-layer-multiplier));
}

.x-btn--active:focus-visible > .x-btn__overlay,
.x-btn[aria-haspopup=menu][aria-expanded=true]:focus-visible > .x-btn__overlay {
	opacity: calc((var(--x-sys-state-pressed-state-layer-opacity, 0.12) + var(--x-sys-state-focus-state-layer-opacity, 0.12)) * var(--x-sys-state-layer-multiplier));
}

@supports not selector(:focus-visible) {

	.x-btn--active:focus > .x-btn__overlay,
	.x-btn[aria-haspopup=menu][aria-expanded=true]:focus > .x-btn__overlay {
		opacity: calc((var(--x-sys-state-pressed-state-layer-opacity, 0.12) + var(--x-sys-state-focus-state-layer-opacity, 0.12)) * var(--x-sys-state-layer-multiplier));
	}
}

@supports selector(:focus-visible) {
	.x-btn::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-btn::after {
			transition-delay: 0s;
			transition-duration: 0s;
		}
	}

	.x-btn:focus-visible::after {
		opacity: calc(0.25 * var(--x-sys-state-layer-multiplier));
	}
}

.x-btn--border {
	border-width: var(--x-btn-outlined-container-outline-width);
}

.x-btn--disabled {
	opacity: 1;
	pointer-events: none;
}

.x-btn--disabled.x-btn {
	color: rgba(var(--x-btn-disabled-label-text-color), var(--x-btn-disabled-label-text-opacity)) !important;
}

.x-btn--disabled.x-btn--variant-elevated,
.x-btn--disabled.x-btn--variant-filled {
	background: rgba(var(--x-btn-disabled-container-color), var(--x-btn-disabled-container-opacity)) !important;
	box-shadow: var(--x-btn-disabled-container-elevation);
}

.x-btn--disabled.x-btn--variant-outlined {
	border-color: rgba(var(--x-btn-disabled-container-outline-color), var(--x-btn-disabled-container-outline-opacity));
}

.x-btn--loading {
	pointer-events: none;
}

.x-btn--loading > .x-btn__prepend,
.x-btn--loading > .x-btn__append,
.x-btn--loading > .x-btn__content {
	opacity: 0;
}

.x-btn--size-x-small {
	--_x-btn-container-height: var(--x-btn-container-height) + var(--x-btn-container-height-reducer) * var(--x-btn-size-x-small-multiplier);
	--_x-btn-size-multiplier: var(--x-btn-size-x-small-multiplier);
}

.x-btn--size-small {
	--_x-btn-container-height: var(--x-btn-container-height) + var(--x-btn-container-height-reducer) * var(--x-btn-size-small-multiplier);
	--_x-btn-size-multiplier: var(--x-btn-size-small-multiplier);
}

.x-btn--size-default {
	--_x-btn-container-height: var(--x-btn-container-height) + var(--x-btn-container-height-reducer) * var(--x-btn-size-default-multiplier);
	--_x-btn-size-multiplier: var(--x-btn-size-default-multiplier);
}

.x-btn--size-large {
	--_x-btn-container-height: var(--x-btn-container-height) + var(--x-btn-container-height-reducer) * var(--x-btn-size-large-multiplier);
	--_x-btn-size-multiplier: var(--x-btn-size-large-multiplier);
}

.x-btn--size-x-large {
	--_x-btn-container-height: var(--x-btn-container-height) + var(--x-btn-container-height-reducer) * var(--x-btn-size-x-large-multiplier);
	--_x-btn-size-multiplier: var(--x-btn-size-x-large-multiplier);
}

.x-btn.x-btn--density-default {
	height: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-default-multiplier));
}

.x-btn.x-btn--density-comfortable {
	height: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-comfortable-multiplier));
}

.x-btn.x-btn--density-compact {
	height: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-compact-multiplier));
}

.x-btn--stacked {
	--x-btn-container-height: var(--x-btn-stacked-container-height);
	--x-btn-container-min-width: var(--x-btn-stacked-container-min-width);
	--x-btn-icon-size: var(--x-btn-stacked-icon-size);
	--x-btn-icon-size-reducer: var(--x-btn-stacked-icon-size-reducer);
	--x-btn-label-text-size: var(--x-btn-stacked-label-text-size);
	--x-btn-spacing: var(--x-btn-stacked-spacing);
	align-content: center;
	grid-template-areas: "prepend" "content" "append";
	grid-template-columns: auto;
	grid-template-rows: max-content max-content max-content;
	justify-items: center;
}

.x-btn--stacked .x-btn__content {
	flex-direction: column;
	line-height: var(--x-btn-stacked-label-text-line-height);
}

.x-btn--stacked .x-btn__prepend,
.x-btn--stacked .x-btn__append,
.x-btn--stacked .x-btn__content > .x-icon--start,
.x-btn--stacked .x-btn__content > .x-icon--end {
	margin-inline-end: 0;
	margin-inline-start: 0;
}

.x-btn--stacked .x-btn__prepend,
.x-btn--stacked .x-btn__content > .x-icon--start {
	margin-bottom: calc(var(--x-btn-stacked-space-between));
}

.x-btn--stacked .x-btn__append,
.x-btn--stacked .x-btn__content > .x-icon--end {
	margin-top: calc(var(--x-btn-stacked-space-between));
}

.x-btn--stacked .x-icon {
	--x-icon-size-multiplier: var(--x-btn-stacked-icon-size-multiplier);
}

.x-btn--absolute {
	position: absolute;
}

.x-btn--fixed {
	position: fixed;
}

.x-btn--variant-elevated,
.x-btn--variant-filled {
	background: var(--x-btn-container-color);
	color: var(--x-btn-label-text-color);
}

.x-btn--variant-elevated {
	--x-elevation-level: var(--x-btn-elevated-container-elevation-level);
}

.x-btn--variant-filled {
	--x-elevation-level: var(--x-btn-filled-container-elevation-level);
}

.x-btn--variant-outlined,
.x-btn--variant-plain,
.x-btn--variant-text,
.x-btn--variant-tonal {
	background: transparent;
	color: inherit;
}

.x-btn--variant-outlined {
	border: var(--x-btn-outlined-container-outline-width) solid var(--x-btn-container-outline-color);
}

@media (hover: hover) {
	.x-btn--variant-outlined:hover {
		border-color: var(--x-btn-hover-container-outline-color);
	}
}

.x-btn--variant-outlined:focus-visible {
	border-color: var(--x-btn-focus-container-outline-color);
}

@supports not selector(:focus-visible) {
	.x-btn--variant-outlined:focus {
		border-color: var(--x-btn-focus-container-outline-color);
	}
}

.x-btn--variant-outlined.x-btn--active,
.x-btn[aria-haspopup=menu][aria-expanded=true] {
	border-color: var(--x-btn-pressed-container-outline-color);
}

.x-btn--variant-plain {
	opacity: var(--x-btn-plain-container-opacity);
}

@media (hover: hover) {
	.x-btn--variant-plain:hover {
		opacity: 1;
	}
}

.x-btn--variant-plain:focus-visible {
	opacity: 1;
}

@supports not selector(:focus-visible) {
	.x-btn--variant-plain:focus {
		opacity: 1;
	}
}

.x-btn--variant-plain > .x-btn__overlay {
	display: none;
}

.x-btn--variant-plain.x-btn--active,
.x-btn[aria-haspopup=menu][aria-expanded=true] {
	opacity: 1;
}

.x-btn--variant-text > .x-btn__overlay {
	background: currentColor;
}

.x-btn--variant-tonal > .x-btn__underlay {
	background: currentColor;
	border-radius: inherit;
	opacity: var(--x-sys-state-pressed-state-layer-opacity);
	pointer-events: none;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.x-btn--block {
	flex: 1 0 auto;
	min-width: 100%;
}

.x-btn.elevation {
	--x-elevation-shadow-color: var(--x-btn-container-shadow-color);
}

@media (hover: hover) {
	.x-btn.elevation.x-btn--variant-elevated:hover {
		--x-elevation-level: var(--x-btn-elevated-hover-container-elevation-level);
	}
}

.x-btn.elevation.x-btn--variant-elevated:focus-visible {
	--x-elevation-level: var(--x-btn-elevated-focus-container-elevation-level);
}

@supports not selector(:focus-visible) {
	.x-btn.elevation.x-btn--variant-elevated:focus {
		--x-elevation-level: var(--x-btn-elevated-focus-container-elevation-level);
	}
}

.x-btn.elevation.x-btn--variant-elevated:active {
	--x-elevation-level: var(--x-btn-elevated-pressed-container-elevation-level);
}

@media (hover: hover) {
	.x-btn.elevation.x-btn--variant-filled:hover {
		--x-elevation-level: var(--x-btn-filled-hover-container-elevation-level);
	}
}

.x-btn.elevation.x-btn--variant-filled:focus-visible {
	--x-elevation-level: var(--x-btn-filled-focus-container-elevation-level);
}

@supports not selector(:focus-visible) {
	.x-btn.elevation.x-btn--variant-filled:focus {
		--x-elevation-level: var(--x-btn-filled-focus-container-elevation-level);
	}
}

.x-btn.elevation.x-btn--variant-filled:active {
	--x-elevation-level: var(--x-btn-filled-pressed-container-elevation-level);
}

.x-btn--icon {
	--x-btn-container-shape: var(--x-btn-icon-container-shape);
	--x-btn-icon-size: var(--x-btn-icon-icon-size);
	--x-btn-icon-size-reducer: var(--x-btn-icon-icon-size-reducer);
	min-width: 0;
	padding: 0;
}

.x-btn--icon .x-icon {
	--x-icon-size-multiplier: var(--x-btn-icon-icon-size-multiplier);
}

.x-btn--icon.x-btn--density-default {
	width: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-default-multiplier));
}

.x-btn--icon.x-btn--density-comfortable {
	width: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-comfortable-multiplier));
}

.x-btn--icon.x-btn--density-compact {
	width: calc(var(--_x-btn-container-height) + var(--x-btn-density-reducer) * var(--x-btn-density-compact-multiplier));
}

.x-btn--rounded {
	border-radius: var(--x-btn-rounded-container-shape);
}