.form-external-done {
  display: none;

  & p {
    margin: 0;
  }

  &.success {
    display: block;
    padding: 0.625rem;
    border-radius: 4px;
    background: #d4edda;
    color: #155724;
  }

}





.form-external {

  & [class*="col-"] {}

  & .form-external-message {
    padding: 0.625rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
  }

  & .form-external-control {
    margin-bottom: 0.5rem;

    & .form-external-input {
      width: 100%;
      padding: 0.5rem;
      border: 0.0625rem solid #ddd;
      border-radius: 0.25rem;

      &:focus {
        border-color: #ddd;
        outline: none;
      }

    .error & {
      border-color: #d23;

      & ~ .form-external-state {
        color: #d23;
      }

    }

    & ~ label {

      display: block;
      display: none;
    }

  }

  & textarea {
    min-height: 10rem;
    resize: none;
    outline: none;
  }



  }



  & button {
    background: #d23;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 4px;
    cursor: pointer;
    outline: none;

    &:hover {
      background: color-mix(in srgb, #d23 90%, #000)
    }

    &:disabled {
      background: #ddd;
      cursor:not-allowed;
    }

  }

  & .form-external-state {
    height: 2rem;
    padding: 0.25rem 0 0.5rem;
    font-size: 0.875rem;
  }

  & .form-external-message {

    &.error {
      display: block;
      background: #f8d7da;
      color: #721c24;
    }

  }

}


/* ---------------------------------------------
  CHECKBOX & RADIO
  Чекбоксы и радиокнопки по мотивам
  --------------------------------------------- */

.form-external-checkbox {
  display: none;
  position: absolute;

  & + label {
    display: inline-block;
    position: relative;
    padding-left: 1.875rem;
    vertical-align: middle;
    cursor: pointer;

    &:before {
      top: 0;
      left: 0;
      content: "";
      width: 1.25rem;
      height: 1.25rem;
      position: absolute;
      display: inline-block;
      border: 0.125rem solid rgba(0, 0, 0, 0.25);
      border-radius: 0.1875rem;
    }

    &:after {
      top: 0.125rem;
      left: 0.4375rem;
      width: 0.375rem;
      height: 0.75rem;
      transform: rotate(45deg);
      border: 0.125rem solid white;
      border-top: none;
      border-left: none;
    }

    &:hover {

      &:before {
        border-color: #178;
      }

    }

    &:after {
      content: "";
      position: absolute;
      transition: opacity 0.25s linear;
      opacity: 0;
    }

  }

  &:checked {

    & + label {

      &:before {
        border-color:  #178;
        background-color:  #178;
      }

      &:after {
        opacity: 1;
      }

    }

  }

}