input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

input:invalid:not(:focus, :placeholder-shown) { ... }

input:user-invalid { ... }

input:user-invalid ~ .error-message { ... }

@supports (margin: 10px) {...}

@supports selector(:has(+ *)) {...}

if(CSS.supports("margin: 10px"))

@supports not (margin: 10px) {...}

@supports not selector(:has(+ *)) {...}

if(!CSS.supports("margin: 10px"))

.form-group:has(input:user-invalid) { ... }

label:has( + input:user-invalid) { ... }

label {
  color: var(--color);
}

.form-group:has(:user-invalid) {
  --color: red;
}

.form-group:has(:user-valid) {
  --color: green;
}

:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 3px #fff;
}

input {
  appearance: none; /* Safari fix */
}

input[type="checkbox"] {
  appearance: none;
  ...
}
 
/* Checked state */
input:checked::before {
  ...
}

@layer reset, components, states;
 
@layer components {
  /* Buttons, inputs etc. */
}
 
@layer states {
  /* Make sure stats override, no matter specificity count */
  :disabled {
    background-color: #ddd;
    color: #999;
  }
  
  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: 2px;
  }
}

@layer reset, global, components, utilities, states;

:root {
  --theme-color: 258 29% 43%;
  --accent-color: 180 50% 43%;
}
 
input {
  font: inherit;
  font-size: max(16px, 1em);
  padding: 0.25em 0.5em;
  background-color: #fff;
  border: 2px solid hsl(var(--theme-color));
}
 
input:is(:focus-visible, :hover) {
  border-color: hsl(var(--accent-color));
}

input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  /* custom styling */
}

form {
  accent-color: var(--theme-color, hotpink);
  /* checkbox, radio, progress, range etc. */
}

form {
  display: grid;
  gap: 1.5rem;
}
 
.form-group {
  display: grid;
  gap: .3125rem;
}

.container {
  container-type: inline-size;
}

@container (width > 25rem) {
  .newsletter { ... }
}