@import '../helpers/helpers';

.form-personal-details {

  &__row {
    @include make-row;
  }

  &__descr {
    @include make-col-ready;
    @include make-col(12);

    @include media-breakpoint-up(md) {
      @include make-col(10);
      @include make-col-offset(1);
    }
  }

  .form-row__label,
  .form-row__field,
  .form-row__info,
  .form-row__error {
    @include make-col-ready;

    @include media-breakpoint-down(sm) {
      @include make-col(12);
      @include make-col-offset(0);
    }

    @include media-breakpoint-only(md) {
      @include make-col(10);
      @include make-col-offset(1);
    }

    @include media-breakpoint-up(lg) {
      @include make-col(7);
      @include make-col-offset(1);
    }
  }

  .row-title {

    .form-row__label,
    .form-row__field,
    .form-row__info {

      @include media-breakpoint-down(sm) {
        @include make-col-offset(0);
      }

      @include media-breakpoint-only(md) {
        @include make-col-offset(1);
      }

      @include media-breakpoint-up(lg) {
        @include make-col-offset(1);
        @include make-col(10);
      }
    }

    .form-row__field {

      @include media-breakpoint-down(sm) {
        @include make-col(12);
      }

      @include media-breakpoint-up(md) {
        @include make-col-offset(1);
        @include make-col(4);
      }
      @include media-breakpoint-up(xl) {
        .ddn {
          width: 75%;
        }
      }
    }
  }

  .form-row__action {

    .form-row__col-btn {
      @include media-breakpoint-down(sm) {
        @include make-col(12);

        &:first-child {
          @include make-col-offset(0);
          margin-bottom: 20px;
        }
      }

      @include media-breakpoint-only(md) {
        @include make-col(3);

        &:first-child {
          @include make-col-offset(1);
        }
      }

      @include media-breakpoint-up(lg) {
        @include make-col(3);

        &:first-child {
          @include make-col-offset(1);
        }
      }
    }
  }

  .form-row__action_custom {
    margin-bottom: 0;

    @include media-breakpoint-up(lg) {
      &::before {
        left: 10.33333%;
        right: 10.33333%;
      }
    }

    @include media-breakpoint-down(md) {
      &::before {
        left: 70px;
        right: 70px;
      }
    }

    @include media-breakpoint-down(sm) {
      &::before {
        left: 15px;
        right: 15px;
      }
    }
  }
}

.personal-update-warning {
  width: 100%;
  margin-bottom: 30px;
}