.syscofy-auth-form,
.syscofy-auth-action-stack {
	display: grid;
	gap: 16px;
}

.syscofy-auth-field {
	display: grid;
	gap: 6px;
}

.syscofy-auth-control-wrap {
	position: relative;
}

.syscofy-auth-control {
	display: block;
	width: 100%;
	height: 44px;
	padding: 12px;
	color: var(--auth-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	text-align: start;
	background: var(--auth-field);
	border: 1px solid var(--auth-border);
	border-radius: 10px;
	outline: 0;
	box-shadow: none;
	transition: border-color 120ms ease, outline-color 120ms ease;
}

.syscofy-auth-control-wrap:has(.syscofy-auth-password-toggle) .syscofy-auth-control {
	padding-right: 44px;
}

.syscofy-auth-control::placeholder {
	color: var(--auth-muted);
	opacity: 1;
}

.syscofy-auth-control:hover {
	border-color: color-mix(in srgb, var(--auth-border), var(--auth-text) 28%);
}

.syscofy-auth-control:focus-visible {
	border-color: var(--auth-accent);
	outline: 1px solid var(--auth-accent);
	outline-offset: -1px;
}

.syscofy-auth-password-toggle {
	position: absolute;
	top: 1px;
	right: 1px;
	left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: var(--auth-muted);
	background: transparent;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
}

.syscofy-auth-password-toggle:hover {
	color: var(--auth-text);
}

.syscofy-auth-password-toggle:focus-visible {
	outline: 1px solid var(--auth-accent);
	outline-offset: -2px;
}

.syscofy-auth-password-toggle svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.syscofy-auth-password-toggle[aria-pressed="true"] .syscofy-auth-password-slash {
	display: none;
}

.syscofy-auth-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding: 0 18px;
	color: var(--auth-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	background: var(--auth-surface);
	border: 1px solid var(--auth-border);
	border-radius: 9999px;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.syscofy-auth-action--primary {
	color: var(--auth-on-accent);
	background: var(--auth-accent);
	border-color: var(--auth-accent);
	box-shadow: 0 3px 6px -2px rgb(0 0 0 / 8%), 0 1px 1px rgb(0 0 0 / 8%);
}

.syscofy-auth-action--primary:hover {
	background: var(--auth-accent-hover);
	border-color: var(--auth-accent-hover);
}

.syscofy-auth-action--primary:active {
	background: var(--auth-accent-active);
}

.syscofy-auth-action--secondary:hover {
	background: var(--auth-field);
	border-color: color-mix(in srgb, var(--auth-border), var(--auth-text) 24%);
}

.syscofy-auth-action:focus-visible,
.syscofy-auth-back:focus-visible,
.syscofy-auth-inline-navigation a:focus-visible,
.syscofy-auth-footer a:focus-visible {
	outline: 1px solid var(--auth-accent);
	outline-offset: 2px;
}

.syscofy-auth-action:disabled,
.syscofy-auth-action[aria-disabled="true"] {
	cursor: wait;
	opacity: .62;
}

.syscofy-auth-google-icon {
	position: absolute;
	left: 18px;
	width: 18px;
	height: 18px;
}