@layer utilities {
	.form {
		.horizontal,
		&.horizontal {
			display: flex;
			flex-direction: row;
			gap: 1rem;
			align-items: flex-end;
			width: fit-content;
		}
		&.highlighted {
			position: relative;
			padding: 1.2rem;
			border-radius: 1rem;
			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: url('../img/highlightbox-wide.svg') no-repeat center center;
				background-size: 100% 100%;
				z-index: -1;
			}
		}
		legend {
			font-size: var(--fontsize-h3);
			font-weight: 700;
			line-height: 1;
			margin-bottom: 1rem;
		}
		fieldset {
			border: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 0.666rem;
		}
	}

	.forgot {
		font-size: var(--fontsize-small);
		line-height: 1.3333;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		width: fit-content;
		
		&:hover, &:active {
			text-decoration-thickness: 2px;
		}
	}

	.formfield {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		label {
			font-size: var(--fontsize-smallkicker);
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 0.04em;
			line-height: 1.3333;
		}
	}

	.textinput {
		font-family: var(--noto), sans-serif;
		font-size: var(--fontsize-small);
		line-height: 1.3333;
		font-weight: 600;
		max-width: var(--maxwidth);
		border: 2px solid black;
		padding: 0.4rem;
		&.wide {
			width: 20rem;
		}
		&:focus-visible {
			outline: 2px solid black;
		}
	}

	.selectwrap {
		border: 2px solid black;
		height: 2.45rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		font-size: 1.125rem;
		select {
			font-family: var(--noto), sans-serif;
			background: transparent;
			border: none;
			font-size: 1.125rem;
			line-height: 1.3333;
			font-weight: 600;
			letter-spacing: 0.02em;
			padding: 0 0.5rem;
		}
	}

	.button {
		background: transparent;
		border: 3px solid black;
		padding: 0 0.7em 0.25rem 0.7em;
		min-height: 2.45rem;
		font-variant: all-small-caps;
		font-weight: 700;
		font-size: var(--fontsize-normal);
		letter-spacing: 0.035em;
		cursor: pointer;
		background: white;
		display: inline-flex;
		align-items: center;
		line-height: 1;
		gap: 0.5rem;
		white-space: nowrap;
		&.icononly {
			overflow: hidden;
			min-width: 3rem;
			span:not(.icon) {
				position: absolute;
				text-indent: -5000px;
			}
		} 
		
		&.large {
			position: relative;
			font-size: var(--fontsize-h3);
			display: inline-block;
			height: 3.2rem;
			line-height: 2.5rem;
		}
		&.style-1 {	
			margin: 2rem 1.6rem;
			
			@media (min-width: 1440px) {
				margin-left: -0.2rem;
				margin-right: -0.2rem;
			}
			&::before {
				content: '';
				background: url(../img/rectangle3.svg) no-repeat center center;
				background-size: 100% 100%;
				position: absolute;
				inset: -1.5rem -1.9rem;
				z-index: -1;
			}
			
		}

		&.style-2 {
			background: var(--green);
			color: white;
			border-color: white;
			fill: white;
		}

		.icon {
			width: 1.5rem;
			height: 1.5rem;
			margin-top: 0.2rem;
			svg {
				width: 1.5rem;
				height: 1.5rem;
				
			}
		}
		
			
		&:hover {
			background: black;
			color: white;
			svg {
				fill: white;
			}
		}

		
	}
}