/*!
* Components/AppBrand
*/

.app-brand {
	color: inherit;
	border-radius: var(--x-sys-shape-corner-medium);
	display: inline-flex;
	outline: none;
	position: relative;
	text-decoration: none;
	transition-duration: var(--x-sys-motion-duration-medium2);
	transition-property: opacity;
	transition-timing-function: var(--x-sys-motion-easing-standard);
	white-space: nowrap;
}

@supports selector(:focus-visible) {
	.app-brand::after {
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		border: 0.125rem solid currentColor;
		border-radius: inherit;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--x-sys-motion-duration-short4) ease-in-out;
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

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

	@media (prefers-reduced-motion: reduce) {
		.app-brand::after,
		.app-brand:focus-visible::after {
			transition: none;
		}
	}
}

.app-brand[href]:hover {
	opacity: calc(1 - var(--x-sys-opacity-hover));
}

.app-brand[href]:focus {
	opacity: calc(1 - var(--x-sys-opacity-focus));
}

.app-brand > .x-icon {
	transition-duration: var(--x-sys-motion-duration-short4);
	transition-property: width;
	transition-timing-function: var(--x-sys-motion-easing-standard);
}

.app-brand__svg {
	fill: currentColor;
	height: 100%;
	max-width: 100%;
	width: 100%;
}