@import '../helpers/helpers';

.form-register {
  margin: 40px 0 0;
  padding: 40px 0;
  background: $gray-bg;

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

  &__describe-yourself {
    .form-row__label {
      @include normal-text;
      font-weight: 400;
    }
  }

  .form-row {
    margin-bottom: 30px;
  }

  .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-up(md) {
      @include make-col(10);
      @include make-col-offset(1);
    }

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

  .row-title {

    .form-row__label,
    .form-row__field,
    .form-row__info,
    .form-row__error {
      @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(3);
      }
    }

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

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

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

      // to avoid cutting text in the select under lg
      @include media-breakpoint-up(xl) {
        @include make-col(2);
      }
    }
  }

  &__row {
    @include make-row;

    & ~ & {
      .form-register__descr {
        &::before {
          position: absolute;
          content: '';
          height: 1px;
          background: $gray-light;
          left: 15px;
          right: 15px;
        }
      }

      h3 {
        margin-top: 25px;
      }
    }
  }

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

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

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

  .form-row_btn {
    .form-row__col-btn {
      @include make-col-ready;

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

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

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

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

      // to align with select xl
      @include media-breakpoint-up(xl) {
        @include make-col(2);
      }
    }
  }

  .align-top {
    margin-top: -10px;
    margin-bottom: 20px;
  }

  .form-row__action {
    .form-row__col-btn {

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

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

      @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(3);
        }
      }
      // to align with select xl
      @include media-breakpoint-up(xl) {
        @include make-col(2);
      }
    }
  }

  .form-row__action_custom {

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

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

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