:root {
  --input-bg: var(--surface-solid);
  --input-text: var(--text);
  --input-border: var(--line);
  --input-placeholder: var(--muted);
  --input-focus-border: var(--primary);
}

.login-page .login-card input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
  caret-color: var(--primary);
  -webkit-text-fill-color: var(--input-text);
}

.login-page .login-card input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.login-page .login-card input:focus {
  background: var(--input-bg);
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--input-focus-border) 14%, transparent);
}

.login-page .login-card input::selection {
  background: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--input-text);
}

.login-page .login-card input:-webkit-autofill,
.login-page .login-card input:-webkit-autofill:hover {
  border-color: var(--input-border);
  caret-color: var(--input-text);
  -webkit-text-fill-color: var(--input-text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
}

.login-page .login-card input:-webkit-autofill:focus {
  border-color: var(--input-focus-border);
  caret-color: var(--input-text);
  -webkit-text-fill-color: var(--input-text);
  -webkit-box-shadow:
    0 0 0 1000px var(--input-bg) inset,
    0 0 0 4px color-mix(in srgb, var(--input-focus-border) 14%, transparent);
  box-shadow:
    0 0 0 1000px var(--input-bg) inset,
    0 0 0 4px color-mix(in srgb, var(--input-focus-border) 14%, transparent);
}