/* General form styles
   Question = groups paragraph text, label, input for a single question */

.form {
  textarea {
    height: max-content;
  }

  button {
    margin: $spacing-03 0;
  }
}

.form__legend {
  margin-bottom: $spacing-03;
  font-weight: 700;
  line-height: 1;
  @include typescale-01;
  @include font-serif;
}

.form__header {
  margin-bottom: 0;
  padding-bottom: $spacing-03;
  border-bottom: 1px solid rgba($dark-grey, 0.5);
  width: 75%;

  + .form__question {
    margin-top: $spacing-03;
  }
}

.form__question {
  margin: $spacing-05 0;

  ul, ol {
    @include unstyled-list;
  }

  p, label {
    margin-bottom: $spacing-03;
    @include typescale-05;
  }

  button {
    margin-bottom: $spacing-03;
  }

  label {
      display: inline-block;
  }

  input, select, textarea, .select2-container {
    margin-bottom: $spacing-03;
    width: 75%;

    &[type="number"] {
      width: 25%;
    }
    &[type="radio"], &[type="checkbox"] {
      width: 0.8rem;
    }
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    font-size: 1rem;
  }

  textarea:disabled {
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

.form__question--optional {
  color: rgba($dark-grey, 0.5);
  font-size: 1rem;
}

.form__hint {
  display: block;
  margin-top: -$spacing-02;
  color: $dark-grey;
}

.form__subquestion {
  display: none;
  margin-top: -$spacing-04;
  padding-left: $spacing-04;
  border-left: 1px solid $sanguine;
}

.form__long-help, .form__click-to-copy {
  cursor: pointer;

  &:hover {
    stroke: $grapefruit;
  }
}

/* Compact form */
.form--compact {
  @include typescale-06;

  h1 {
    margin-top: 0;
  }

  fieldset, form[data-context="public"] section {
    margin: $spacing-04 0;
    padding: $spacing-03;
    background-color: $light-grey;
  }

  small {
    font-size: 1em;
  }

  button {
    margin: $spacing-02 0;
  }

  .form__header {
    margin: $spacing-03 0;
    font-size: 1em;
    font-weight: 600;
  }

  .form__question {
    margin: 0 0 $spacing-03 0;

    input, select, textarea, .select2-container {
      margin-bottom: $spacing-02;
      font-size: 1em;

      + button {
        margin: 0 0 $spacing-02 $spacing-02;
      }
    }

    input[type="checkbox"]+label,
    input[type="radio"]+label {
      font-size: 1em;
    }
  }
}

// Parsley overrides
.parsley-errors-list {
  @include unstyled-list;

  p {
    margin: $spacing-02 0 $spacing-01 0;
    line-height: 1.15;
  }

  small {
    color: $sanguine;

    &:before {
      display: inline-block;
      margin-right: $spacing-01;
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.6V7M7 9.4H7.006M4.516 1H9.484L13 4.516V9.484L9.484 13H4.516L1 9.484V4.516L4.516 1Z' stroke='%23982E0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      height: 14px;
      width: 14px;
    }
  }
}
