.x-form-row {
  @extend %form-row;

   label{
     &:not(.custom-control) {
      @extend %x-flex-a-center,
      %mb-2;
      color: theme-color("info");
     }
    .x-icon-container {
      @extend %x-icon-md,
      %ml-1;
    }
  }

  .x-form-row-header {
    @extend %x-flex-center;

    .x-icon-container {
      @extend %x-icon-md,
      %mr-2,
              .is-clickable;
    }
  }
}

// Form control mobile and desktop size
.x-form-control {
  @extend %form-control;
  @include media-breakpoint-up(md) {
    height: $input-height-lg;
    padding: $input-padding-y-lg $input-padding-x-lg;
    font-size: $font-size-lg;
    line-height: $input-line-height-lg;
    @include border-radius($input-border-radius-lg);
  }
}


// Form row helper link
.x-help-link {
  @extend %ml-auto;
  font-size: $font-size-sm;
  a {
    @extend %cursor-pointer;
    color: theme-color("info");
    text-decoration: none;
  }
}

a.x-help-link {
  @extend %cursor-pointer;
  @include x-hover-focus-active {
    @include custom-theme-color(primary, color);
  }
}

.form-text {
  &:not(.x-invalid-feedback):not(.x-valid-feedback) {
    color: theme-color("muted");
  }
}

.form-control-readonly {
  @extend %mb-0;
}


.form-control-textarea {
  @extend %overflow-auto;
}

// textarea with expanded
.x-textarea-expand {
  height: calc(2.5rem + 2px) !important;

  &.active {
    height: auto !important;
  }
}


// Form info app details form
.x-form-info {
  p {
    font-size: $font-size-sm;
    color: theme-color("info");
  }
}

.x-form-info-thumbnail {
  max-width: 4rem;
}

.x-form-info-actions {
  @extend .x-form-info,
          %flex-column,
          %h-100,
          %x-flex-j-center;
}



.x-form-info-toolbar {
  @extend %my-0,
          %w-100,
          %x-flex-j-center,
          %flex-column;

  &.is-centered {
    @extend %align-items-center;
  }
}