@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.Loader__spinner {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: 4px solid rgb(100, 100, 100);
  border-top-color: transparent;
  transform-origin: center;
  animation: spinner 1.1s infinite linear;
  margin-right: 0.5rem;
}

.Loader__spinner--inline {
  margin-left: 0.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgb(200, 200, 200);
    border-top-color: transparent;
}

.SmartFormContainer {
  position: relative;

  .SmartFormContainer__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 4em;
    cursor: progress;
    background: rgba(200, 200, 200, 0.5);
  }
}

.SmartFormMessage {
  .SmartFormMessage__title {
    font-size: 1.5rem;
  }

  .SmartFormMessage__description {

  }

  .SmartFormMessage__errors {
    padding-left: 1rem;
    border-left: 5px solid rgb(212, 53, 28);
    font-size: 1rem;
    color: rgb(212, 53, 28);
  }
}



.FormFieldset {
  width: 100%;
  padding: 1rem;
  border: 1px solid rgb(155, 155, 155, 0.2);

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  .FormFieldset__label {
    padding: 0 1rem;
    border: 0 none;
    font-size: 1.75rem;
    font-weight: 700;
  }

  .FormFields {
    .FormFieldset__label {
      font-size: 1.35rem;
    }
  }

  .FormFieldset__description {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .FormFieldset__errors {
    margin: 0 0 1rem 0;
    padding: 1rem 1rem 1rem 2rem;
    border-left: 5px solid rgb(212, 53, 28);
  }

  .FormFieldset__toggle {
    /* behave as <summary> */
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    border: 0 none;
    font-size: inherit;
    font-weight: inherit;
    text-align: initial;

    &::before {
      font-family: "Font Awesome 5 Free";
      display: inline-block;
      margin-right: 1rem;
      content: "\f0d7";
      font-size: 1.5rem;
      width: 1.5rem;
      font-weight: 700;
    }
  }

  .FormFieldset {
    & .FormFieldset__label {
      font-size: 1.35rem;
    }
  }
}

.FormFieldset--collapsed {
  & .FormFieldset__content {
    display: none;
  }
}

.FormFieldset--collapsed.FormFieldset--hasErrors {
  .FormFieldset__label {
    color: rgb(212, 53, 28);
  }
}

.FormFieldset--collapsed {
  .FormFieldset__toggle {
    &::before {
      content: "\f0da";
    }
  }
}

.FormGroup {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgb(155, 155, 155, 0.1);

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  .FormGroup__title {
    font-size: 1.25rem;
    margin: -1.25rem 0 1.25rem 0;

    span {
      padding: 0 0.5rem;
      background: rgb(255, 255, 255);
    }
  }

  .FormGroup__description {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .FormGroup__field {
    margin-bottom: 1rem;

    > .FormField {
      margin-bottom: 0;
    }
  }

  .FormGroup__actions {
    margin-top: 1rem;
  }

  .FormGroup__errors {
    margin: 0 0 0.5rem 0;
    padding: 1rem 1rem 1rem 2rem;
    border-left: 5px solid rgb(212, 53, 28);
  }
}

.FormFieldGroup {
  display: flex;
  gap: 1rem;
  align-items: flex-end;

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  & .FormField {
    flex: 1;

    &:not(:last-child) {
      margin-bottom: 0;
    }
  }
}

.FormField {
  display: block;
  width: 100%;
  font-size: 1.5rem;

  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  & select,
  & input,
  & textarea {
    padding: 0.5rem;
    border: 2px solid currentColor;

    *:disabled {
      opacity: 0.75;
      cursor: not-allowed;
    }
  }

  & input:not([type="radio"], [type="checkbox"], [type="date"], [type="time"]),
  & textarea {
    width: 100%;
  }

  .FormField__additional {
    font-size: 0.9rem;
  }
}

.FormField--error {
  padding-left: 1rem;
  border-left: 5px solid rgb(212, 53, 28);
  font-size: 1rem;

  select,
  input,
  textarea {
    border-color: rgb(212, 53, 28);
  }
}

.FormField--checkbox,
.FormField--radio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .FormField__label {
    order: 2
  }

  .FormField__hint,
  .FormField__error {
    flex-basis: 100%;
    order: 3;
    margin-left: 3rem;
  }

  .FormField__error {
    order: 4;
  }

  .FormField__input-wrapper {
    order: 1
  }

  .FormField__input {
    appearance: none;
    margin: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-content: center;

    &::before {
      content: "";
      width: 1rem;
      height: 1rem;
      transform: scale(0);
      /* Windows High Contrast Mode */
      background-color: CanvasText;
    }

    &:checked::before {
      transform: scale(1);
    }

    &:focus {
      outline: 4px solid var(--focus-color);;
    }
  }

  .FormField__label {
    margin-left: 1rem;
  }
}

.FormField--radio {
  .FormField__input {
    border-radius: 50%;

    &::before {
      clip-path: circle(50%);
    }
  }
}

.FormField--checkbox {
  .FormField__input {
    &::before {
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }
  }
}

.FormField__label {
  display: block;
  font-size: 1.25rem;
}

.FormField__hint {
  display: block;
  font-size: 0.9rem;
}

.FormField__error {
  margin-bottom: 1rem;
  color: rgb(212, 53, 28);
}

.FormField__options {
  display: flex;
  flex-flow: column;

  .FormField__option:not(:last-child) {
    margin-bottom: 0.5rem;
  }

  .FormField__label {
    margin-left: 0.75rem;
    font-size: 1rem;
  }

  .FormField__input {
    width: 1.5rem;
    height: 1.5rem;

    &::before {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
}

.Form {
  .Form__actions {
    margin-top: 1rem;
  }
}

.FormButton {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 1.2rem;
  border-radius: 0;
  background: rgb(0, 112, 60);
  color: rgb(255, 255, 255);
  box-shadow: 0 2px 0 rgb(0, 45, 24);
  border: 2px solid transparent;

  &:hover {
    background: rgb(0 90 48);
    border-color: transparent;
  }

  &:active {
    transform: translate(0, 2px);
  }

  &:focus:not(:active):not(:hover) {
    border-color: rgb(255 221 0);
    color: rgb(11 12 12);
    background-color: rgb(255 221 0);
    box-shadow: 0 2px 0 rgb(11 12 12);
  }

  &.FormButton--remove {
    background-color: rgb(212, 53, 28);
  }

  &.FormButton--increment,
  &.FormButton--decrement {
    font-size: 0.9rem;
  }
}

.FormButton--submitting {
  cursor: progress;
}