/* text field */

fluent-text-field::after {
	display: none;
}

fluent-text-field {
	--base-height-multiplier: 12;
	--control-corner-radius: 16;
}

fluent-text-field::part(root) {
	background-color: transparent !important;
	border: 1px var(--neutral-stroke-strong-rest) solid;
	border-radius: 8px;
}

fluent-text-field:focus::part(root) {
	border-color: var(--focus-stroke-outer);
}

fluent-text-field::part(control) {
	padding-inline-start: 16px;
	padding-inline-end: 16px;
}

/* text area */

fluent-text-area::after {
	display: none;
}

fluent-text-area::part(control) {
	background-color: transparent;
	border: 1px var(--neutral-stroke-strong-rest) solid;
	border-radius: 8px;
	padding: 16px;
}

fluent-text-area::part(control):focus {
	border-color: var(--focus-stroke-outer);
}

/* button */

fluent-button {
	--base-height-multiplier: 12;
	--control-corner-radius: 16;
	--type-ramp-base-font-size: 16px;
}

.footer-area fluent-button.width-100 {
	margin-left: 24px;
	margin-right: 24px;
}

/* field item */

.field-item {
	padding: 16px;
	border-radius: 16px;
	background-color: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
}

.field-item-blank {
	padding: 16px;
	border-radius: 16px;
	border: 1px var(--neutral-stroke-strong-rest) dashed;
}

.field-item-transparent {
	padding: 16px;
}

/* form label */

.fluent-input-label,
.fluent-label {
	opacity: .7;
}

/* input focus overlay */

.input-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.input-text {
	position: relative;
}


/* Dialogs */

.component-dialog,
.component-menu,
.background-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 999999;
}

.background-area {
	background-color: var(--neutral-foreground-rest);
	opacity: .9;
	animation: fade-in .3s ease;
}

.dialog {
	position: relative;
	z-index: 9999999;
	background-color: var(--neutral-fill-rest);
	border-radius: 16px;
	padding: 32px;
	margin: 16px;
	box-shadow: var(--elevation-shadow-dialog);
	/*animation: fade-in .3s ease-in;*/
}

/* Menus */

.menu {
	position: relative;
	z-index: 9999999;
	background-color: var(--neutral-fill-rest);
	border-radius: 16px 16px 0 0;
	padding: 32px;
	animation: move-in .3s ease-in;
}


.scroll-area {
	overflow-y: auto;
}

.scroll-area::-webkit-scrollbar {
	width: 8px;
}

.scroll-area::-webkit-scrollbar-track {
	background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
	background: var(--neutral-layer-4);
	border-radius: 16px;
}






/* Fade in animation */

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Move in animation */

@keyframes move-in {
	0% {
		transform: translateY(180px);
	}

	100% {
		transform: translateY(0);
	}
}