/*!
* Components/XCard
*/

.x-card {
	--x-card-actions-btn-space-between: var(--x-comp-card-actions-btn-space-between, 0.5rem);
	--x-card-actions-spacing: var(--x-comp-card-actions-spacing, 1rem);
	--x-card-container-color: var(--x-comp-card-container-color, var(--x-sys-color-surface));
	--x-card-container-motion-property: var(--x-comp-card-container-motion-property, box-shadow, opacity, background);
	--x-card-container-motion-duration: var(--x-comp-card-container-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
	--x-card-container-motion-easing: var(--x-comp-card-container-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
	--x-card-container-outline-color: var(--x-comp-card-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-card-container-outline-style: var(--x-comp-card-container-outline-style, solid);
	--x-card-container-outline-width: var(--x-comp-card-container-outline-width, 0);
	--x-card-container-underlay-opacity: var(--x-comp-card-container-underlay-opacity, 0.12);
	--x-card-container-shadow-color: var(--x-comp-card-container-shadow-color, var(--x-sys-color-shadow));
	--x-card-container-shape: var(--x-comp-card-container-shape, var(--sys-shape-corner-medium, 0.75rem));
	--x-card-disabled-container-color: var(--x-comp-card-disabled-container-color, var(--x-sys-color-on-surface));
	--x-card-disabled-container-elevation: var(--x-comp-card-disabled-container-elevation, var(--x-elevation-level0));
	--x-card-disabled-container-opacity: var(--x-comp-card-disabled-container-opacity, var(--x-sys-state-disabled-container-opacity, 0.12));
	--x-card-disabled-container-outline-color: var(--x-comp-card-disabled-container-outline-color, rgb(var(--x-sys-color-on-surface)));
	--x-card-disabled-container-outline-opacity: var(--x-comp-card-disabled-container-outline-opacity, 0.12);
	--x-card-disabled-text-color: var(--x-comp-card-disabled-text-color, var(--x-sys-color-on-surface));
	--x-card-disabled-text-opacity: var(--x-comp-card-disabled-text-opacity, var(--x-sys-state-disabled-text-opacity, 0.38));
	--x-card-elevated-container-elevation-level: var(--x-comp-card-elevated-container-elevation-level, 1);
	--x-card-elevated-hover-container-elevation-level: var(--x-comp-card-elevated-hover-container-elevation-level, 2);
	--x-card-elevated-focus-container-elevation-level: var(--x-comp-card-elevated-focus-container-elevation-level, 1);
	--x-card-elevated-pressed-container-elevation-level: var(--x-comp-card-elevated-pressed-container-elevation-level, 1);
	--x-card-filled-container-elevation-level: var(--x-comp-card-filled-container-elevation-level, 0);
	--x-card-filled-hover-container-elevation-level: var(--x-comp-card-filled-hover-container-elevation-level, 1);
	--x-card-filled-focus-container-elevation-level: var(--x-comp-card-filled-focus-container-elevation-level, 0);
	--x-card-filled-pressed-container-elevation-level: var(--x-comp-card-filled-pressed-container-elevation-level, 0);
	--x-card-focus-container-outline-color: var(--x-comp-card-focus-container-outline-color, currentColor);
	--x-card-headline-flex: var(--x-comp-card-headline-flex, none);
	--x-card-headline-overflow: var(--x-comp-card-headline-overflow, hidden);
	--x-card-headline-overflow-wrap: var(--x-comp-card-headline-overflow-wrap, normal);
	--x-card-headline-spacing: var(--x-comp-card-headline-spacing, 0.5rem 1rem);
	--x-card-headline-text-font: var(--x-comp-card-headline-text-font, inherit);
	--x-card-headline-text-hyphens: var(--x-comp-card-headline-text-hyphens, auto);
	--x-card-headline-text-line-height: var(--x-comp-card-headline-text-line-height, var(--x-sys-typescale-headline-small-line-height, 2rem));
	--x-card-headline-text-overflow: var(--x-comp-card-headline-text-overflow, ellipsis);
	--x-card-headline-text-size: var(--x-comp-card-headline-text-size, var(--x-sys-typescale-headline-small-size, 1.5rem));
	--x-card-headline-text-tracking: var(--x-comp-card-headline-text-tracking, var(--x-sys-typescale-headline-small-tracking, 0));
	--x-card-headline-text-transform: var(--x-comp-card-headline-text-transform, var(--x-sys-typescale-headline-small-transform, none));
	--x-card-headline-text-weight: var(--x-comp-card-headline-text-weight, var(--x-sys-typescale-headline-small-weight, 400));
	--x-card-headline-text-white-space: var(--x-comp-card-headline-text-white-space, nowrap);
	--x-card-headline-text-word-break: var(--x-comp-card-headline-text-word-break, normal);
	--x-card-headline-text-word-wrap: var(--x-comp-card-headline-text-word-wrap, break-word);
	--x-card-hover-container-outline-color: var(--x-comp-card-hover-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-card-item-space-between: var(--x-comp-card-item-space-between, 1rem);
	--x-card-item-spacing: var(--x-comp-card-item-spacing, 1rem);
	--x-card-outlined-container-outline-width: var(--x-comp-card-outlined-container-outline-width, 0.0625rem);
	--x-card-plain-container-opacity: var(--x-comp-card-plain-container-opacity, 0.62);
	--x-card-pressed-container-outline-color: var(--x-comp-card-pressed-container-outline-color, rgb(var(--x-sys-color-outline)));
	--x-card-rounded-container-shape: var(--x-comp-card-rounded-container-shape, var(--sys-shape-corner-large, 1rem));
	--x-card-spacing: var(--x-comp-card-spacing, 0);
	--x-card-state-layer-motion-duration: var(--x-comp-card-state-layer-motion-duration, var(--x-sys-motion-duration-short4, 200ms));
	--x-card-state-layer-motion-easing: var(--x-comp-card-state-layer-motion-easing, var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
	--x-card-subhead-flex: var(--x-comp-card-subhead-flex, none);
	--x-card-subhead-text-font: var(--x-comp-card-subhead-text-font, inherit);
	--x-card-subhead-text-size: var(--x-comp-card-subhead-text-size, var(--x-sys-typescale-title-medium-size, 1rem));
	--x-card-subhead-text-weight: var(--x-comp-card-subhead-text-weight, var(--x-sys-typescale-title-medium-weight, 500));
	--x-card-subhead-text-tracking: var(--x-comp-card-subhead-text-tracking, var(--x-sys-typescale-title-medium-tracking, 0.009375rem));
	--x-card-subhead-text-line-height: var(--x-comp-card-subhead-text-line-height, var(--x-sys-typescale-title-medium-line-height, 1.5rem));
	--x-card-subhead-opacity: var(--x-comp-card-subhead-opacity, 1);
	--x-card-subhead-overflow: var(--x-comp-card-subhead-overflow, hidden);
	--x-card-subhead-spacing: var(--x-comp-card-subhead-spacing, 0 1rem);
	--x-card-subhead-text-overflow: var(--x-comp-card-subhead-text-overflow, ellipsis);
	--x-card-subhead-text-transform: var(--x-comp-card-subhead-text-transform, var(--x-sys-typescale-title-medium-transform, none));
	--x-card-subhead-text-white-space: var(--x-comp-card-subhead-text-white-space, nowrap);
	--x-card-text-color: var(--x-comp-card-text-color, var(--x-sys-color-on-surface));
	--x-card-text-flex: var(--x-comp-card-text-flex, 1 1 auto);
	--x-card-text-font: var(--x-comp-card-text-font, inherit);
	--x-card-text-size: var(--x-comp-card-text-size, var(--x-sys-typescale-body-medium-size, 0.875rem));
	--x-card-text-spacing: var(--x-comp-card-text-spacing, 1rem);
	--x-card-text-weight: var(--x-comp-card-text-weight, var(--x-sys-typescale-body-medium-weight, 400));
	--x-card-text-tracking: var(--x-comp-card-text-tracking, var(--x-sys-typescale-body-medium-tracking, 0.015625rem));
	--x-card-text-line-height: var(--x-comp-card-text-line-height, var(--x-sys-typescale-body-medium-line-height, 1.25rem));
	--x-card-text-transform: var(--x-comp-card-text-transform, var(--x-sys-typescale-body-medium-transform, none));
}

.x-card {
	border-radius: var(--x-card-container-shape);
	display: block;
	outline: none;
	overflow: hidden;
	overflow-wrap: break-word;
	padding: var(--x-card-spacing);
	position: relative;
	text-decoration: none;
	transition-duration: var(--x-card-container-motion-duration);
	transition-property: var(--x-card-container-motion-property);
	transition-timing-function: var(--x-card-container-motion-easing);
	z-index: 0;
	border-color: var(--x-card-container-outline-color);
	border-style: var(--x-card-container-outline-style);
	border-width: var(--x-card-container-outline-width);
}

.x-card__image {
	display: flex;
	flex: 1 1 auto;
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.x-card__loader {
	bottom: auto;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
}

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

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

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

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

.x-card:focus-visible > .x-card__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-card:focus > .x-card__overlay {
		opacity: calc(var(--x-sys-state-focus-state-layer-opacity, 0.12) * var(--x-sys-state-layer-multiplier));
	}
}

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

.x-card--active:hover > .x-card__overlay,
.x-card[aria-haspopup=menu][aria-expanded=true]:hover > .x-card__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-card--active:focus-visible > .x-card__overlay,
.x-card[aria-haspopup=menu][aria-expanded=true]:focus-visible > .x-card__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-card--active:focus > .x-card__overlay,
	.x-card[aria-haspopup=menu][aria-expanded=true]:focus > .x-card__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-card::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-card::after {
			transition-delay: 0s;
			transition-duration: 0s;
		}
	}

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

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

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

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

.x-card--clickable {
	cursor: pointer;
	user-select: none;
}

.x-card--disabled {
	opacity: 1;
	pointer-events: none;
	user-select: none;
}

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

.x-card--disabled.x-card .x-card-item--media {
	filter: grayscale(1);
	opacity: var(--x-card-disabled-text-opacity);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.x-card--variant-plain > .x-card__overlay {
	display: none;
}

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

.x-card--variant-text > .x-card__overlay {
	background: currentColor;
}

.x-card--variant-tonal > .x-card__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-card.elevation {
	--x-elevation-shadow-color: var(--x-card-container-shadow-color);
}

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

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

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

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

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

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

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

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

.x-card-actions {
	align-items: center;
	display: flex;
	flex: none;
	padding: var(--x-card-actions-spacing);
}

.x-card-actions > .x-btn ~ .x-btn {
	margin-inline-start: var(--x-card-actions-btn-space-between);
}

.x-card-headline {
	display: block;
	flex: var(--x-card-headline-flex);
	font-family: var(--x-card-headline-text-font);
	font-size: var(--x-card-headline-text-size);
	font-weight: var(--x-card-headline-text-weight);
	hyphens: var(--x-card-headline-text-hyphens);
	letter-spacing: var(--x-card-headline-text-tracking);
	line-height: var(--x-card-headline-text-line-height);
	min-width: 0;
	overflow: var(--x-card-headline-overflow);
	overflow-wrap: var(--x-card-headline-overflow-wrap);
	padding: var(--x-card-headline-spacing);
	text-overflow: var(--x-card-headline-text-overflow);
	text-transform: var(--x-card-headline-text-transform);
	white-space: var(--x-card-headline-text-white-space);
	word-break: var(--x-card-headline-text-word-break);
	word-wrap: var(--x-card-headline-text-word-wrap);
}

.x-card-item .x-card-headline {
	padding: 0;
}

.x-card-headline + .x-card-text,
.x-card-headline + .x-card-actions {
	padding-top: 0;
}

.x-card-item {
	align-items: center;
	display: grid;
	flex: none;
	grid-template-areas: "prepend content append";
	grid-template-columns: max-content auto max-content;
	padding: var(--x-card-item-spacing);
}

.x-card-item + .x-card-actions,
.x-card-item + .x-card-item,
.x-card-item + .x-card-text {
	padding-top: 0;
}

.x-card-item__prepend {
	grid-area: prepend;
	margin-inline-end: var(--x-card-item-space-between);
}

.x-card-item__append {
	grid-area: append;
	margin-inline-start: var(--x-card-item-space-between);
}

.x-card-item__content {
	align-self: center;
	grid-area: content;
	overflow: hidden;
}

.x-card-subhead {
	display: block;
	flex: var(--x-card-subhead-flex);
	font-family: var(--x-card-subhead-text-font);
	font-size: var(--x-card-subhead-text-size);
	font-weight: var(--x-card-subhead-text-weight);
	letter-spacing: var(--x-card-subhead-text-tracking);
	line-height: var(--x-card-subhead-text-line-height);
	opacity: var(--x-card-subhead-opacity);
	overflow: var(--x-card-subhead-overflow);
	padding: var(--x-card-subhead-spacing);
	text-overflow: var(--x-card-subhead-text-overflow);
	text-transform: var(--x-card-subhead-text-transform);
	white-space: var(--x-card-subhead-text-white-space);
}

.x-card-item .x-card-subhead {
	padding: 0;
}

.x-card-text {
	flex: var(--x-card-text-flex);
	font-family: var(--x-card-text-font);
	font-size: var(--x-card-text-size);
	font-weight: var(--x-card-text-weight);
	letter-spacing: var(--x-card-text-tracking);
	padding: var(--x-card-text-spacing);
	text-transform: var(--x-card-text-transform);
}

.x-card-text + .x-card-actions {
	padding-top: 0;
}