@import '../jnt-variables';
@import '../forms/input';
@import '../forms/calendar';
@import '../overlays/popover';
@import '../layout/responsive';
@import '../jnt-hosts';

@mixin jnt-date-picker($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-date-picker-host)} {
    @if $declare {
      display: inline-block;
      min-width: 100px;
      &[data-width='fluid'] {
        display: block;
        flex: 1;
      }
    }
    @include for-mobile() {
      @if $declare {
        border: 1px solid $jnt-control-border-color;
        border-radius: $jnt-corner-small;
        background-color: $jnt-control-background;
        &[calendar-opened='true'] {
          #{$wrapper} [data-calendar-dropdown][child-of=jnt-date-picker-host] {
            display: block;
          }
        }
        &[time-opened='true'] {
          #{$wrapper} [data-time-dropdown][child-of=jnt-date-picker-host] {
            display: flex;
          }
        }
      }
    }
  }
  @include for-mobile() {
    #{$context} #{$wrapper} [data-input][child-of=jnt-date-picker-host] {
      @if $declare {
        flex: 1;
        @include jnt-input((
          scheme: (
            normal: (
              border-color: transparent,
              hover: (
                border-color: transparent
              ),
              focus: (
                border-color: transparent,
                shadow: none
              )
            )
          )
        ), '&');
      }
    }
  }
  #{$context} #{$wrapper} [data-input][child-of=jnt-date-picker-host] {
    @if $declare {
      @include min-for-tablet() {
        &[data-date] {
          flex: 1 1 auto;
        }
        &[data-time] {
          flex: 0 4 auto;
          min-width: 100px;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-calendar-dropdown][child-of=jnt-date-picker-host] {
    @if $declare {
      flex: 1;
    }
    [data-calendar][child-of=jnt-date-picker-host] {
      @include jnt-calendar((layout: auto), '&');
    }
    @include for-mobile() {
      @if $declare {
        padding: $jnt-gutter-normal;
        display: none;
      }
    }
  }
  #{$context} #{$wrapper} [data-time-dropdown][child-of=jnt-date-picker-host] {
    @if $declare {
      padding: $jnt-gutter-normal;
      [data-time-col][child-of=jnt-date-picker-host] {
        width: 70px;
      }
      @include for-mobile() {
        display: none;
      }
      @include jnt-input((
        sizes: (
          small: (
            chevron: 0
          ),
          normal: (
            chevron: 0
          )
        )
      ));
    }
  }
}
@if $jnt-debug {
  @debug 'date-picker compiled';
}