/* #region Utility */
._input_3ckke_2:not([type=range]):where(:not(._slider_3ckke_2 > :last-child)) {
  border-radius: 1em;
  padding: 1ch;
  border: 1px solid light-dark(#d1d1d6, #333);
}

/* #endregion */
/* #region Templates */
/* #endregion */
._input_3ckke_2:not([type=range]) {
  scrollbar-color: light-dark(#8b8b8b, #9f9f9f) transparent;
  font-family: Arial, Helvetica, sans-serif;
}
._input_3ckke_2:not([type=range]):user-invalid {
  border-color: #dc3545;
}
._input_3ckke_2:not([type=range]):where(:not(._slider_3ckke_2 > :last-child)) {
  background-color: light-dark(#ffffff, #1c1c1e);
  min-width: 0;
}

._slider_3ckke_2 {
  display: grid;
  grid: 1fr/1fr max-content;
  gap: 1ch;
}
._slider_3ckke_2 > :first-child {
  accent-color: var(--color-accent);
  appearance: none;
  background: linear-gradient(to right, var(--color-accent) 0%, var(--color-accent) var(--perc), light-dark(#ffffff, #1c1c1e) var(--perc), light-dark(#ffffff, #1c1c1e) 100%);
  border-radius: 1em;
  border: 1px solid light-dark(#d1d1d6, #333);
  height: 0.5em;
  align-self: center;
}
._slider_3ckke_2 > :last-child {
  font-variant-numeric: tabular-nums;
  background-color: transparent;
  field-sizing: content;
  padding: 0;
  border: 0;
}

._color_3ckke_45._color_3ckke_45 {
  height: calc(1lh + 2ch + 2px);
  inline-size: unset;
  padding: 0.5ch;
  cursor: pointer;
}
._color_3ckke_45._color_3ckke_45::-webkit-color-swatch-wrapper {
  padding: 0;
}
._color_3ckke_45._color_3ckke_45::-webkit-color-swatch {
  border-radius: calc(1em - 0.5ch);
  border: 0;
}
._color_3ckke_45._color_3ckke_45::-moz-color-swatch {
  border-radius: calc(1em - 0.5ch);
  border: 0;
}