.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: $base-spacing-1-half;
  position: relative;

  label {
    font-size: $base-font-size;
    letter-spacing: 0.5px;
    font-weight: 400;
    line-height: 1;
    color: $tundra-500;
    margin-bottom: 4px;
    display: block;
  }

  abbr {
    color: $base-state-error;
  }

  .optional {
    font-size: $base-font-size * 0.875;
    color: $boulder-400;
  }

  input {
    padding: $base-spacing $base-spacing-3-4th;
    height: 16px;
    font-size: $base-font-size;
    letter-spacing: 0.5px;
    font-weight: 400;
    line-height: 1;
    color: $tundra-500;
    border: 1px solid $boulder-400;
    border-radius: 2px;
    background-color: $base-white;
    position: relative;
    outline: none;

    &:focus {
      color: $base-black;
      border-color: $sky-blue-500;
    }
  }

  textarea {
    padding: $base-spacing $base-spacing-3-4th;
    font-size: $base-font-size;
    letter-spacing: 0.5px;
    font-weight: 400;
    line-height: 1.5;
    color: $tundra-500;
    border: 1px solid $boulder-400;
    border-radius: 2px;
    background-color: $base-white;
    outline: none;
    resize: none;

    &~ .message-helper {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &:focus {
      color: $base-black;
      border-color: $sky-blue-500;
    }

    &:focus ~ .message-helper {
      color: $sky-blue-500;
    }

    &.expandable {
      resize: unset;
    }
  }

  select {
    color: $tundra-500;
    border: 1px solid $boulder-400;
    border-radius: 2px;
    outline: none;
    padding: $base-spacing $base-spacing-3-4th;
    background: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="4 -12 24 48" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right;
    background-color: $base-white;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    &:focus {
      border: 1px solid $sky-blue-500;
    }
  }

  .message-helper,
  .field-validation-error {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 400;
    line-height: 1;
    display: none;
    color: $tundra-500;
  }

  &.disabled {
    label {
      color: $nobel-300;
    }

    .optional {
      color: $nobel-300;
    }

    input {
      color: $nobel-300;
      border-color: $alto-200;
      cursor: not-allowed;
    }

    .select-toggle {
      color: $nobel-300;
      border-color: $alto-200;
      cursor: not-allowed;

      &::after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23B3B3B3"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
      }
    }

    .message-helper {
      color: $nobel-300;
    }

    textarea {
      color: $nobel-300;
      border-color: $alto-200;
      cursor: not-allowed;
    }

    .checkmark {
      border-color: $nobel-300;
    }

    .dot {
      border-color: $nobel-300;
    }
  }
}

.has-error {
  input {
    color: $base-state-error !important;
    border-color: $base-state-error !important;
  }

  .select {
    &-toggle {
      color: $base-state-error !important;
      border-color: $base-state-error !important;

      &::after {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23C92428"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
      }
    }
  }

  .message-helper,
  .field-validation-error {
    display: flex;
    align-items: center;
    color: $base-state-error !important;

    &::before {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="%23C92428"><path fill-rule="evenodd" d="M11.5432415,2.27638693 C11.713492,1.93620712 12.1751125,1.91005274 12.390172,2.19790782 L12.4384888,2.27641345 L21.946526,21.2773669 C22.1002734,21.584617 21.9052552,21.9418394 21.5813837,21.994373 L21.4978587,22.0009535 L2.50005913,21.9616197 C2.1570639,21.9609096 1.9251758,21.6278685 2.0222352,21.3154724 L2.05347919,21.2380077 L11.5432415,2.27638693 Z M11.9898576,3.61780154 L3.30997394,20.9628015 L20.6887586,20.9988015 L11.9898576,3.61780154 Z M11.9908585,15.9938015 C12.5436454,15.9938015 12.9917676,16.4415168 12.9917676,16.9938015 C12.9917676,17.5460863 12.5436454,17.9938015 11.9908585,17.9938015 C11.4380717,17.9938015 10.9899494,17.5460863 10.9899494,16.9938015 C10.9899494,16.4415168 11.4380717,15.9938015 11.9908585,15.9938015 Z M11.9908585,10.0272592 C12.2365416,10.0272592 12.4408757,10.2041344 12.4832501,10.4373836 L12.4913131,10.5272592 L12.4913131,14.5067898 C12.4913131,14.7829322 12.267252,15.0067898 11.9908585,15.0067898 C11.7451755,15.0067898 11.5408414,14.8299146 11.498467,14.5966654 L11.490404,14.5067898 L11.490404,10.5272592 C11.490404,10.2511168 11.7144651,10.0272592 11.9908585,10.0272592 Z"/></svg>');
      margin-right: $base-spacing-half;
    }
  }

  textarea {
    color: $base-state-error !important;
    border-color: $base-state-error !important;

    &~ .message-helper {
      justify-content: flex-start;
    }
  }

  .checkboxes,
  .radios {
    color: $base-state-error !important;
  }

  .checkboxes ~ .message-helper,
  .radios ~ .message-helper {
    margin-top: $base-spacing-3-4th;
  }

  .checkmark,
  .dot {
    border-color: $base-state-error;
  }

  .datepicker-toggle::after {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="%23C92428"><defs><path id="calendar-a" d="M8,2 C8.55228475,2 9,2.44771525 9,3 L9,5 L15,5 L15,3 C15,2.44771525 15.4477153,2 16,2 L17,2 C17.5522847,2 18,2.44771525 18,3 L18,4.99949514 L20.503897,4.99949514 C21.2835932,4.99949514 21.9243457,5.59438322 21.9970305,6.35503512 L22.003897,6.49949514 L22.003897,20.4992478 C22.003897,21.2789439 21.409009,21.9196964 20.6483571,21.9923812 L20.503897,21.9992478 L3.50240705,21.9992478 C2.72271093,21.9992478 2.08195837,21.4043597 2.00927363,20.6437078 L2.00240705,20.4992478 L2.002,11 L2,11 L2,10 L2.002,10 L2.00240705,6.49949514 C2.00240705,5.71979902 2.59729513,5.07904646 3.35794704,5.00636171 L3.50240705,4.99949514 L6,4.99949514 L6,3 C6,2.44771525 6.44771525,2 7,2 L8,2 Z M21.003,11 L3.002,11 L3.00240705,20.4992478 C3.00240705,20.7447076 3.17928221,20.9488561 3.41253142,20.9911921 L3.50240705,20.9992478 L20.503897,20.9992478 C20.7493569,20.9992478 20.9535054,20.8223726 20.9958414,20.5891234 L21.003897,20.4992478 L21.003,11 Z M6,5.99949514 L3.50240705,5.99949514 C3.25694716,5.99949514 3.05279868,6.1763703 3.01046272,6.4096195 L3.00240705,6.49949514 L3.002,10 L21.003,10 L21.003897,6.49949514 C21.003897,6.25403525 20.8270219,6.04988677 20.5937727,6.0075508 L20.503897,5.99949514 L18,5.99949514 L18,7 C18,7.55228475 17.5522847,8 17,8 L16,8 C15.4477153,8 15,7.55228475 15,7 L15,6 L9,6 L9,7 C9,7.55228475 8.55228475,8 8,8 L7,8 C6.44771525,8 6,7.55228475 6,7 L6,5.99949514 Z M8,3 L7,3 L7,7 L8,7 L8,3 Z M17,3 L16,3 L16,7 L17,7 L17,3 Z"/></defs><use fill-rule="evenodd" xlink:href="%23calendar-a"/></svg>');
  }
}

.mandatory-message {
  display: flex;
  margin-bottom: $base-spacing;
  font-size: $base-font-size * 0.875;
  color: $tundra-500;
}

// allow individual disabled checkboxes
.checkboxes.disabled {
  color: $nobel-300;
  cursor: not-allowed;

  .checkmark {
    border-color: $nobel-300;

    &:hover {
      border-color: $nobel-300;
    }
  }
}

// allow individual disabled radio buttons
.radios.disabled {
  color: $nobel-300;
  cursor: not-allowed;

  .dot {
    border-color: $nobel-300;

    &:hover {
      border-color: $nobel-300;
    }
  }
}

fieldset {
  border: none;
}

// fixed only umbraco form's form fields not taking full width
.umbraco-forms-field {
  input,
  textarea {
    flex: 1;
  }
}

.form-divider {
  width: 100%;
  margin-top: $base-spacing-half;
  margin-bottom: $base-spacing-2x;
  border-top: 1px solid $alto-200;
}