@import "~bootstrap/scss/forms";



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

   label{
     &:not(.custom-control) {
      @extend .d-flex,
              .align-items-center,
              .text-info,
              .mb-2;
     }
    .x-icon-container {
      @extend .x-icon-md,
              .ml-1;
    }
  }

  .x-form-row-header {
    @extend .d-flex,
            .align-items-center,
            .justify-content-between;

    .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-sm;

  a {
    @extend .text-info;
    text-decoration: none;
  }
}

.form-text {
  &:not(.x-invalid-feedback):not(.x-valid-feedback) {
    @extend .text-muted;
  }
}

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


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


// Form info app details form
.x-form-info {
  p {
    @extend %font-size-sm,
    .text-info;
  }
}

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

.x-form-info-actions {
  @extend .x-form-info,
          .flex-column,
          .h-100,
          .d-flex,
          .justify-content-between;
}



.x-form-info-toolbar {
  @extend .my-0,
          .d-flex,
          .flex-column,
          .justify-content-center,
          .w-100;

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