/* Shared form primitives that are not text fields (checkboxes, radios and
   empty states). Text fields and buttons live in shared/controls.css. */

.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--gutter);
  color: var(--color-muted);
}

.empty-state__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
}

.empty-state__message {
  margin: 0;
}

/* Native checkboxes otherwise inherit the operating system's chrome and clash
   with the same form on different browsers. */
.form-check-input,
.login-page input[type="checkbox"],
.account-page input[type="checkbox"],
.shopping-cart-page input[type="checkbox"]:not([name="removefromcart"]) {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 var(--space-md);
  width: var(--space-md);
  height: var(--space-md);
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-canvas);
  cursor: pointer;
}

.form-check-input::before,
.login-page input[type="checkbox"]::before,
.account-page input[type="checkbox"]::before,
.shopping-cart-page input[type="checkbox"]:not([name="removefromcart"])::before {
  content: "";
  width: var(--space-2xs);
  height: var(--space-3xs);
  border-left: var(--stroke-control) solid var(--color-ink);
  border-bottom: var(--stroke-control) solid var(--color-ink);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--motion-card) var(--ease-out);
}

.form-check-input:disabled {
  background-color: var(--color-surface);
  cursor: default;
}

.form-check-input:checked,
.login-page input[type="checkbox"]:checked,
.account-page input[type="checkbox"]:checked,
.shopping-cart-page input[type="checkbox"]:not([name="removefromcart"]):checked {
  border-color: var(--color-action);
  background-color: var(--color-action);
}

.form-check-input:checked::before,
.login-page input[type="checkbox"]:checked::before,
.account-page input[type="checkbox"]:checked::before,
.shopping-cart-page input[type="checkbox"]:not([name="removefromcart"]):checked::before {
  transform: rotate(-45deg) scale(1);
}

/* Radio primitive. */
.form-radio-input,
.account-page input[type="radio"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: var(--space-md);
  height: var(--space-md);
  margin: 0 var(--space-2xs) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-canvas);
  vertical-align: middle;
  cursor: pointer;
}

.form-radio-input::before,
.account-page input[type="radio"]::before {
  content: "";
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  transform: scale(0);
  transition: transform var(--motion-card) var(--ease-out);
}

.form-radio-input:checked,
.account-page input[type="radio"]:checked {
  border-color: var(--color-action);
  background-color: var(--color-action);
}

.form-radio-input:checked::before,
.account-page input[type="radio"]:checked::before {
  transform: scale(1);
}