@import '../jnt-variables';
@import '../elements/icon';
@import '../jnt-hosts';
@import '../jnt-functions';

@mixin jnt-form($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
  );
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-form-host)} {
    @if $declare {
      display: block;
      position: relative;
      &[data-height='fluid'] {
        display: flex;
        flex-direction: column;
        flex: 1;
        #{$wrapper} form[child-of=jnt-form-host] {
          flex: 1;
          display: flex;
          flex-direction: column;
          [data-content][child-of=jnt-form-host] {
            flex: 1;
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} form[child-of=jnt-form-host] {
    footer[child-of=jnt-form-host] {
      @if $declare {
        margin-top: $jnt-gutter-large;
      }
    }
    header[child-of=jnt-form-host] {
      @if $declare {
        margin-bottom: $jnt-gutter-large;
      }
    }
    [data-loading][child-of=jnt-form-host], [data-error][child-of=jnt-form-host], [data-success][child-of=jnt-form-host] {
      @if $declare {
        position: absolute;
        top: -$jnt-gutter-small;
        left: -$jnt-gutter-small;
        bottom: -$jnt-gutter-small;
        right: -$jnt-gutter-small;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($jnt-primary-background, .85);
        border-radius: $jnt-corner-normal;
        z-index: 1;
        @include jnt-icon((size: 80px));
      }
    }
  }
}
@if $jnt-debug {
  @debug 'form compiled';
}

@mixin jnt-form-item($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-form-item-host)} {
    @if $declare {
      display: block;
    }
  }
}
@if $jnt-debug {
  @debug 'form-item compiled';
}

@mixin jnt-form-control($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-form-control-host)} {
    @if $declare {
      display: block;
    }
  }
}
@if $jnt-debug {
  @debug 'form-control compiled';
}

@mixin jnt-form-label($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    color: $jnt-primary-text-light-color,
    font-size: $jnt-font-size-small
  );
  $vars: $passed;
  $declare: false;
  $wrapper: null;
  @if $jnt-ng-deep {
    $wrapper: '::ng-deep';
  }
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-form-label-host)} {
    @if $declare {
      display: inline-block;
    }
  }
  #{$context} #{$wrapper} label[child-of=jnt-form-label-host] {
    font-size: map-get($vars, font-size);
    color: map-get($vars, color);
  }
  #{$context} #{$wrapper} [data-required][child-of=jnt-form-label-host] {
    @if $declare {
      margin-left: $jnt-gutter-tiny;
      color: $jnt-red-color;
    }
  }
}
@if $jnt-debug {
  @debug 'form-label compiled';
}

@mixin jnt-form-message($passed: (), $context: null, $strategy: 'changes') {
  $defs: ();
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-form-message-host)} {
    @if $declare {
      display: none;
      font-size: $jnt-font-size-tiny;
      color: $jnt-fail-color;
    }
  }
}
@if $jnt-debug {
  @debug 'form-message compiled';
}