// Custom form with aside option for create account / login

.x-form {
  @extend %x-form-centered,
          .m-auto,
          .pt-5,
          .pb-4;
  max-width: 30em;
  width: 100%;
}

.x-form-header {
  @extend .mb-4,
          .w-100;
}

.x-form-header-title {
  @extend .d-flex,
          .justify-content-between,
          .align-items-end;
}

.x-form-helper {
  @extend .mb-0,
          .d-flex,
          .align-items-center,
          .mb-md-1;
  font-size:  $small-font-size;
  > * {
    font-size: $small-font-size;
    line-height: 0;
  }
  .btn {
    @extend .border-0,
            .ml-1;
  }
  .x-btn-label {
    font-size: $small-font-size;
    line-height: 0;
  }
}

.x-link {
  @include custom-theme-color(primary, color);
  @include hover-focus {
    @extend %cursor-pointer;
    color: var(--custom-theme-primary-hover, theme-color("primary-darker")) !important;
  }
}


.x-form-aside {
  @extend .d-flex,
          .flex-column,
          .flex-lg-row,
          .my-4;
}

.x-form-main {
  @extend .pb-3,
          .pb-md-0,
          .mb-md-3;
}

.x-form-main,
.x-form-aside-main {
  @extend .w-100;
}

.x-form-aside-actions {
  @extend %x-form-aside-divider;

  .btn {
    @extend .mb-3;
  }
}


// account signin, create, reset form actions footer
.x-form-actions {
  @extend .d-flex,
          .flex-column,
          .justify-content-center,
          .justify-content-md-between,
          .flex-md-row;

  .x-form-actions-checkbox {
    @extend .m-0,
            .mb-4,
            .pb-2,
            .mb-md-0,
            .pb-md-0,
            .mr-auto;
  }

  .x-form-actions-btn {
    @include media-breakpoint-down(sm) {
      width: 100%;
      > * {
        width: 100%;
      }
    }
  }
}

.x-form-actions-helper {
  @include media-breakpoint-down(sm) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// center form and align
%x-form-centered {
  @extend .d-flex,
          .flex-column,
          .align-items-md-start,
          .justify-content-md-center,
          .h-100;
}

// divider on aside
%x-form-aside-divider {
  @extend .pt-lg-0,
          .mt-lg-0,
          .pt-4,
          .mt-4,
          .pl-lg-4,
          .ml-lg-4;

  @include media-breakpoint-down(md) {
    border-top: 1px solid $border-color;
  }

  @include media-breakpoint-up(lg) {
    border-left: 1px solid $border-color;
  }
}