.form {
  display: block;
  float: left;
  width: 100%;
}
.form .form__group {
  display: block;
  float: left;
  width: 100%;
  padding: var(--s-1) 0;
  display: flex;
  flex-direction: column;
}
.form .form__group > .form__group__label {
  width: 100%;
  font-size: var(--fs-14);
  margin-bottom: 4px;
  font-weight: var(--fw-500);
}
.form .form__group > .form__group__field {
  width: 100%;
}
.form .form__group > .form__group__field.--todo > .--todo-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form .form__group > .form__group__field.--todo > .--todo-items > .--todo-item {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.form .form__group > .form__group__field.--todo > .--todo-items > .--todo-item > input[type="text"] {
  flex: 1 1 auto;
}
.form .form__group > .form__group__message {
  width: 100%;
  padding: var(--s-1) var(--s-2);
  min-height: var(--s-2);
}
.form .form__group > .form__group__message > div {
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
}
.form .form__group > .form__group__message > div.--error {
  display: none;
  color: var(--c-danger);
}
.form .form__group > .form__group__message > div.--success {
  display: none;
  color: var(--c-success);
}
.form .form__group > .form__group__message > div.--warning {
  display: none;
  color: var(--c-warning);
}
.form .form__group input[type="text"],
.form .form__group textarea {
  width: 100%;
  height: var(--s-6);
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--c-text-2);
  border-radius: var(--r-8);
  font-size: var(--fs-16);
  line-height: var(--s-2);
}
.form .form__group input[type="text"]:hover,
.form .form__group textarea:hover {
  border-color: var(--c-text);
}
.form .form__group input[type="text"]:focus,
.form .form__group textarea:focus {
  border: 1px solid transparent;
  outline: 2px solid var(--focus-border);
  outline-offset: -2px;
}
.form .form__group textarea {
  height: 150px;
  resize: vertical;
}
.form .form__group.has-error input[type="text"],
.form .form__group.has-error textarea {
  border-color: var(--c-danger);
  outline-color: var(--c-danger);
}