/*===============================
=             Form             =
================================*/

.m-neuron-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-left: -15px;
  margin-right: -15px;

  &__field-group {
    margin-bottom: 10px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;

    input[type="checkbox"],
    input[type="radio"] {
      width: auto;
    }

    label {
      display: block;
    }

    &--required {
      &.m-neuron-form__field-group--mark-required {
        > label {
          &:after {
            content: "*";
            color: red;
            padding-left: 0.2em;
          }
        }
      }
    }

    &--acceptance {
      display: flex;
      align-items: center;

      .m-neuron-form__subgroup {
        order: 1;
      }

      label {
        order: 2;
        margin-left: 5px;
      }
    }
  }

  &__field {
    width: 100%;
  }

  &__subgroup {
    position: relative;
    display: flex;
    flex-direction: column;

    &:not(.m-neuron__subgroup--inline) {
      .m-neuron-form__option:not(:last-of-type) {
        margin-right: 10px;
      }
    }

    .m-neuron-form__option {
      display: flex;
      align-items: center;

      input[type="radio"] {
        margin-right: 8px;
        visibility: hidden;
        position: relative;

        @-moz-document url-prefix() {
          visibility: visible;
        }

        &:after {
          width: 13px;
          height: 13px;
          border-radius: 50%;
          position: relative;
          top: -4px;
          left: -1px;
          content: "";
          display: inline-block;
          visibility: visible;
          border: 1px solid #000;
        }

        &:checked:before {
          width: 9px;
          height: 9px;
          left: 1px;
          top: 3px;
          border-radius: 50%;
          position: absolute;
          background-color: #000;
          content: "";
          visibility: visible;
        }
      }
    }

    select {
      appearance: none;
      border-radius: 3px;
    }

    label {
      margin-bottom: 0;
    }

    &--inline {
      flex-direction: row;
    }
  }

  &__field-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  &__button {
    display: flex;

    button {
      width: 100%;
      text-align: center;

      > span {
        display: flex;
        justify-content: center;

        &.m-neuron-form__button-icon--right {
          flex-direction: row-reverse;

          > .m-neuron-form__button-icon {
            margin-left: 10px;
          }
        }

        &.m-neuron-form__button-icon--left {
          > .m-neuron-form__button-icon {
            margin-right: 10px;
          }
        }
      }
    }

    &--start {
      .a-neuron-button {
        margin-right: auto;
      }
    }

    &--center {
      .a-neuron-button {
        margin-left: auto;
        margin-right: auto;
      }
    }

    &--end {
      .a-neuron-button {
        margin-left: auto;
      }
    }

    &--stretch {
      .a-neuron-button {
        width: 100%;
      }
    }
  }
}
