.m3dl-container {
	box-sizing: border-box;
}

.m3dl-font-display-large,
.m3dl-font-display-medium,
.m3dl-font-display-small {
	font-family: var(--m3dl-font-display, var(--m3dl-font));
}

.m3dl-font-headline-large,
.m3dl-font-headline-medium,
.m3dl-font-headline-small {
	font-family: var(--m3dl-font-headline, var(--m3dl-font));
}

.m3dl-font-title-large,
.m3dl-font-title-medium,
.m3dl-font-title-small {
	font-family: var(--m3dl-font-title, var(--m3dl-font));
}

.m3dl-font-label-large,
.m3dl-font-label-medium,
.m3dl-font-label-small {
	font-family: var(--m3dl-font-label, var(--m3dl-font));
}

.m3dl-font-body-large,
.m3dl-font-body-medium,
.m3dl-font-body-small {
	font-family: var(--m3dl-font-body, var(--m3dl-font));
}

/* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
.m3dl-font-display-large {
	font-size: var(--m3dl-font-display-large-size, 3.563rem);
	line-height: var(--m3dl-font-display-large-height, 1.123);
	letter-spacing: var(--m3dl-font-display-large-tracking, 0);
	font-weight: var(--m3dl-font-display-large-weight, 400);
}

.m3dl-font-display-medium {
	font-size: var(--m3dl-font-display-medium-size, 2.813rem);
	line-height: var(--m3dl-font-display-medium-height, 1.156);
	letter-spacing: var(--m3dl-font-display-medium-tracking, 0);
	font-weight: var(--m3dl-font-display-medium-weight, 400);
}

.m3dl-font-display-small {
	font-size: var(--m3dl-font-display-small-size, 2.25rem);
	line-height: var(--m3dl-font-display-small-height, 1.222);
	letter-spacing: var(--m3dl-font-display-small-tracking, 0);
	font-weight: var(--m3dl-font-display-small-weight, 400);
}

/* Headlines are best-suited for short, high-emphasis text on smaller screens. */
.m3dl-font-headline-large {
	font-size: var(--m3dl-font-headline-large-size, 2rem);
	line-height: var(--m3dl-font-headline-large-height, 1.25);
	letter-spacing: var(--m3dl-font-headline-large-tracking, 0);
	font-weight: var(--m3dl-font-headline-large-weight, 400);
}

.m3dl-font-headline-medium {
	font-size: var(--m3dl-font-headline-medium-size, 1.75rem);
	line-height: var(--m3dl-font-headline-medium-height, 1.286);
	letter-spacing: var(--m3dl-font-headline-medium-tracking, 0);
	font-weight: var(--m3dl-font-headline-medium-weight, 400);
}

.m3dl-font-headline-small {
	font-size: var(--m3dl-font-headline-small-size, 1.5rem);
	line-height: var(--m3dl-font-headline-small-height, 1.333);
	letter-spacing: var(--m3dl-font-headline-small-tracking, 0);
	font-weight: var(--m3dl-font-headline-small-weight, 400);
}

/* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
.m3dl-font-title-large {
	font-size: var(--m3dl-font-title-large-size, 1.375rem);
	line-height: var(--m3dl-font-title-large-height, 1.273);
	letter-spacing: var(--m3dl-font-title-large-tracking, 0);
	font-weight: var(--m3dl-font-title-large-weight, 400);
}

.m3dl-font-title-medium {
	font-size: var(--m3dl-font-title-medium-size, 1rem);
	line-height: var(--m3dl-font-title-medium-height, 1.5);
	letter-spacing: var(--m3dl-font-title-medium-tracking, 0);
	font-weight: var(--m3dl-font-title-medium-weight, 500);
}

.m3dl-font-title-small {
	font-size: var(--m3dl-font-title-small-size, 0.875rem);
	line-height: var(--m3dl-font-title-small-height, 1.429);
	letter-spacing: var(--m3dl-font-title-small-tracking, 0.006rem);
	font-weight: var(--m3dl-font-title-small-weight, 500);
}

/* Label styles are smaller, utilitarian styles, used for things like the text inside components
or for very small text in the content body, such as captions. */
.m3dl-font-label-large {
	font-size: var(--m3dl-font-label-large-size, 0.875rem);
	line-height: var(--m3dl-font-label-large-height, 1.429);
	letter-spacing: var(--m3dl-font-label-large-tracking, 0.006rem);
	font-weight: var(--m3dl-font-label-large-weight, 500);
}

.m3dl-font-label-medium {
	font-size: var(--m3dl-font-label-medium-size, 0.75rem);
	line-height: var(--m3dl-font-label-medium-height, 1.333);
	letter-spacing: var(--m3dl-font-label-medium-tracking, 0.031rem);
	font-weight: var(--m3dl-font-label-medium-weight, 500);
}

.m3dl-font-label-small {
	font-size: var(--m3dl-font-label-small-size, 0.688rem);
	line-height: var(--m3dl-font-label-small-height, 1.455);
	letter-spacing: var(--m3dl-font-label-small-tracking, 0.031rem);
	font-weight: var(--m3dl-font-label-small-weight, 500);
}

/* Body styles are used for longer passages of text in your app. */
.m3dl-font-body-large {
	font-size: var(--m3dl-font-body-large-size, 1rem);
	line-height: var(--m3dl-font-body-large-height, 1.5);
	letter-spacing: var(--m3dl-font-body-large-tracking, 0);
	font-weight: var(--m3dl-font-body-large-weight, 400);
}

.m3dl-font-body-medium {
	font-size: var(--m3dl-font-body-medium-size, 0.875rem);
	line-height: var(--m3dl-font-body-medium-height, 1.429);
	letter-spacing: var(--m3dl-font-body-medium-tracking, 0.016rem);
	font-weight: var(--m3dl-font-body-medium-weight, 400);
}

.m3dl-font-body-small {
	font-size: var(--m3dl-font-body-small-size, 0.75rem);
	line-height: var(--m3dl-font-body-small-height, 1.333);
	letter-spacing: var(--m3dl-font-body-small-tracking, 0.025rem);
	font-weight: var(--m3dl-font-body-small-weight, 400);
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

:focus-visible:not(.focus-inset, .focus-none) {
	animation: refocus 0.6s forwards cubic-bezier(0.14, 5.63, 0.4, 0.5);
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--m3dl-color-primary));
}

:focus-visible:is(.focus-inset):not(.focus-none) {
	animation: refocus-inset 0.3s forwards cubic-bezier(0.05, 0.7, 0.1, 1);
	outline: none;
}

:focus-visible.focus-none {
	outline: none;
}

@keyframes refocus {
	0% {
		box-shadow: 0 0 0 0px rgb(var(--m3dl-color-primary));
	}

	100% {
		box-shadow: 0 0 0 3px rgb(var(--m3dl-color-primary));
	}
}

@keyframes refocus-inset {
	0% {
		box-shadow: inset 0 0 0 0px rgb(var(--m3dl-color-primary));
	}

	100% {
		box-shadow: inset 0 0 0 3px rgb(var(--m3dl-color-primary));
	}
}

::placeholder {
	color: rgb(var(--m3dl-color-on-background) / 0.5);
	opacity: 1;
}

::selection {
	background-color: rgb(var(--m3dl-color-tertiary-container));
	color: rgb(var(--m3dl-color-on-tertiary-container));
}