/*
  styling of forms and form inputs

  input, selects, textareas
  labels
*/




/* input, selects, textareas
============================================================================ */
input,
select,
textarea {
  min-height: 2.25rem;
  padding-inline: .5rem;
  display: flex;
  align-items: center;

  border: 1px solid var(--color-input-border);
  background-color: var(--color-input-background);

  color: var(--color-input-foreground);

  transition-property: border-color color;
  transition-duration: .1s;
  transition-timing-function: linear;
}

textarea {
  padding: 1rem;
}

  input.important,
  select.important,
  textarea.important {
    min-height: 3rem;
    padding-inline: .7rem;
  }

select {
  padding-inline-end: 2.1em;

  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M12 18.999c-.4 0-.776-.156-1.059-.438L.22 7.841A.745.745 0 0 1 0 7.31c0-.2.078-.389.22-.53a.744.744 0 0 1 1.06 0L12 17.499 22.72 6.78a.744.744 0 0 1 1.06 0 .744.744 0 0 1 0 1.06L13.06 18.56a1.487 1.487 0 0 1-1.06.439z"/></svg>');
  background-repeat: no-repeat;
  background-position: right .7em center;
  background-size: .7em;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-interactive-hover);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-secondary);
}



/* labels
============================================================================ */
label {
  cursor: default;
}

label.required:after {
  color: var(--color-important);
  content: ' *';
}