/**
 * General form styling
 */

@media screen {

  /**
   * Form labels
   */
  label {
    display: block;
    font-weight: 600;
  }

  label + input,
  label + select,
  label + textarea {
    margin-top: 0;
  }

  /* Help text */
  label em {
    display: inline-block;
    color: var(--label-help);
    font-weight: 400;
    font-size: 0.9em;
  }

  /* Match font and size on form elements */
  select,
  input,
  textarea {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
  }

  /* Text-based inputs */
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="time"],
  input[type="date"],
  input[type="url"],
  textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-accent);
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    -webkit-appearance: none;
  }

  /* Disabled text-based inputs */
  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="number"][disabled],
  input[type="email"][disabled],
  input[type="tel"][disabled],
  input[type="time"][disabled],
  input[type="date"][disabled],
  input[type="url"][disabled],
  textarea[disabled] {
    background-color: var(--input-bg-disabled);
  }

  /**
   * Form item
   */
  .form-item + .form-item {
    margin-top: 0.5rem;
  }

  /* Form item label */
  .form-item label + * {
    margin-top: 0;
  }

  /* Text-based inputs in form items */
  .form-item > input[type="text"],
  .form-item > input[type="password"],
  .form-item > input[type="number"],
  .form-item > input[type="email"],
  .form-item > input[type="tel"],
  .form-item > input[type="time"],
  .form-item > input[type="date"],
  .form-item > input[type="url"],
  .form-item > textarea {
    width: 100%;
  }

  /* Select */
  .form-item select {
    width: 100%;
  }

  /**
   * Check boxes & radio buttons
   */
  .radio-check-group {
    display: flex;
    flex-wrap: wrap;
  }

  .radio-check-group * {
    margin-top: 0;
  }

  .radio-check {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
  }

  .radio-check input {
    margin: 0.25em 0.4em;
  }

  .radio-check span {
    margin-top: 0;
  }

  /**
   * Input validation statuses
   */
  .form-item.form-error em {
    font-weight: 600;
    color: var(--form-error);
  }

  .form-item.form-error input {
    border-color: var(--form-error);
    background-color: var(--form-error-bg);
  }

  /**
   * Submit area
   */
  .submit-area {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
  }

  /**
   * Updated input
   *
   * Flashes green to signify an update
   */
  input.updated {
    animation: fieldUpdated 2s ease-out;
  }
}

@keyframes fieldUpdated {

  from {
    background-color: hsl(103, 100%, 71%);
  }

  to {
    background-color: hsl(0, 100%, 100%);
  }
}