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

@mixin button-fill($scheme, $wrapper) {
  #{$wrapper} button[child-of=jnt-button-host] {
    color: map-get($scheme, inverse-color);
    background-color: map-get($scheme, color);
    [data-loading][child-of=jnt-button-host] {
      @include jnt-spinner((
        color: $jnt-white-color
      ), '&');
    }
    [data-icon][child-of=jnt-button-host] {
      @include jnt-icon((color: map-get($scheme, inverse-color)), '&');
    }
    &:hover {
      background-color: map-get($scheme, hover-color);
    }
    @if map-has-key($scheme, focus) {
      $focus: map-get($scheme, focus);
      &:focus {
        box-shadow: map-get($focus, shadow);
      }
    }
    [data-badge][child-of=jnt-button-host] {
      @include jnt-badge((
        background: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null),
        color: if(map-get($scheme, color), map-get($scheme, color) !important, null)
      ), '&');
    }
  }
}
@mixin button-ghost($scheme, $wrapper) {
  #{$wrapper} button[child-of=jnt-button-host] {
    color: map-get($scheme, color);
    background-color: transparent;
    border: 1px solid map-get($scheme, color);
    [data-loading][child-of=jnt-button-host] {
      @include jnt-spinner((
        color: map-get($scheme, color)
      ), '&');
    }
    [data-icon][child-of=jnt-button-host] {
      @include jnt-icon((color: map-get($scheme, color)), '&');
    }
    &:hover {
      background-color: map-get($scheme, color);
      color: map-get($scheme, inverse-color);
      [data-icon][child-of=jnt-button-host] {
        @include jnt-icon((color: map-get($scheme, inverse-color)), '&');
      }
      [data-badge][child-of=jnt-button-host] {
        @include jnt-badge((
          background: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null),
          color: if(map-get($scheme, color), map-get($scheme, color) !important, null)
        ), '&');
      }
    }
    @if map-has-key($scheme, focus) {
      $focus: map-get($scheme, focus);
      &:focus {
        box-shadow: map-get($focus, shadow);
      }
    }
    [data-badge][child-of=jnt-button-host] {
      @include jnt-badge((
        background: if(map-get($scheme, color), map-get($scheme, color) !important, null),
        color: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null)
      ), '&');
    }
  }
  &[data-scheme=#{$jnt-scheme-secondary-name}] {
    #{$wrapper} button[child-of=jnt-button-host] {
      color: map-get($scheme, inverse-color);
      border-color: map-get($scheme, color);
      [data-loading][child-of=jnt-button-host] {
        @include jnt-spinner((
          color: map-get($scheme, inverse-color)
        ), '&');
      }
      [data-icon][child-of=jnt-button-host] {
        @include jnt-icon((color: map-get($scheme, inverse-color)), '&');
      }
      &:hover {
        background-color: map-get($scheme, inverse-color);
        color: map-get($scheme, color);
        [data-icon][child-of=jnt-button-host] {
          @include jnt-icon((color: map-get($scheme, color)), '&');
        }
        [data-badge][child-of=jnt-button-host] {
          @include jnt-badge((
            background: if(map-get($scheme, color), map-get($scheme, color) !important, null),
            color: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null)
          ), '&');
        }
      }
      [data-badge][child-of=jnt-button-host] {
        @include jnt-badge((
          background: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null),
          color: if(map-get($scheme, color), map-get($scheme, color) !important, null)
        ), '&');
      }
    }
  }
}
@mixin button-transparent($scheme, $wrapper) {
  &[data-shape='circle'] {
    #{$wrapper} button[child-of=jnt-button-host] {
      &:focus {
        @if map-has-key($scheme, focus) {
          $focus: map-get($scheme, focus);
          outline: 0;
          box-shadow: map-get($focus, shadow);
        }
      }
    }
  }
  #{$wrapper} button[child-of=jnt-button-host] {
    color: map-get($scheme, color);
    background-color: transparent;
    border-color: transparent;
    [data-loading][child-of=jnt-button-host] {
      @include jnt-spinner((
        color: map-get($scheme, color)
      ), '&');
    }
    [data-icon][child-of=jnt-button-host] {
      @include jnt-icon((color: map-get($scheme, color)), '&');
    }
    &:hover {
      color: map-get($scheme, hover-color);
    }
    &:focus {
      outline-offset: 1px;
      outline: map-get($scheme, color) auto 1px;
    }
    [data-badge][child-of=jnt-button-host] {
      @include jnt-badge((
        background: if(map-get($scheme, color), map-get($scheme, color) !important, null),
        color: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null)
      ), '&');
    }
  }
  &[data-scheme=#{$jnt-scheme-secondary-name}] {
    #{$wrapper} button[child-of=jnt-button-host] {
      color: map-get($scheme, inverse-color);
      [data-loading][child-of=jnt-button-host] {
        @include jnt-spinner((
          color: map-get($scheme, inverse-color)
        ), '&');
      }
      [data-icon][child-of=jnt-button-host] {
        @include jnt-icon((color: map-get($scheme, inverse-color)), '&');
      }
      &:hover {
        color: map-get($scheme, inverse-color);
      }
      [data-badge][child-of=jnt-button-host] {
        @include jnt-badge((
          background: if(map-get($scheme, inverse-color), map-get($scheme, inverse-color) !important, null),
          color: if(map-get($scheme, color), map-get($scheme, color) !important, null)
        ), '&');
      }
    }
  }
}
@mixin button-size($size, $wrapper) {
  #{$wrapper} button[child-of=jnt-button-host] {
    padding: map-get($size, padding);
    height: map-get($size, height);
    font-size: map-get($size, font-size);
  }
  &[data-with-text='false'] {
    #{$wrapper} button[child-of=jnt-button-host] {
      padding: map-get($size, padding-without-text);
    }
    &[data-shape='circle'] {
      #{$wrapper} button[child-of=jnt-button-host] {
        @if map-has-key($size, icon) {
          $icon: map-get($size, icon);
          padding: 0 #{calc((#{map-get($size, height)} - #{map-get($icon, size)}) / 2)};
        }
      }
      &[data-outline='ghost'] {
        #{$wrapper} button[child-of=jnt-button-host] {
          @if map-has-key($size, icon) {
            $icon: map-get($size, icon);
            padding: 0 #{calc((#{map-get($size, height)} - #{map-get($icon, size)}) / 2 - 1px)};
          }
        }
      }
    }
  }
  &[data-outline='transparent'] {
    &[data-shape='square'] {
      #{$wrapper} button[child-of=jnt-button-host] {
        padding-left: $jnt-gutter-small;
        padding-right: $jnt-gutter-small;
        border-radius: 0;
      }
    }
  }
}
@mixin jnt-button($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    corner: $jnt-corner-large,
    border: null,
    background: null,
    hover-background: null,
    color: null,
    hover-color: null,
    shadow: null,
    corners: (
      top: (
        left: null,
        right: null
      ),
      bottom: (
        left: null,
        right: null
      )
    ),
    borders: (
      right: null,
      left: null,
      top: null,
      bottom: null
    ),
    without-text-corner: $jnt-corner-small,
    text-transform: null,
    padding: null,
    font-weight: $jnt-font-weight-base,
    disabled: (
      opacity: .65
    ),
    icon: (
      margin: $jnt-gutter-small,
      size: 18px
    ),
    schemes: (
      primary: (
        color: $jnt-primary-color,
        inverse-color: $jnt-white-color,
        hover-color: $jnt-primary-dark-color,
        focus: (
          shadow: 0 1px 5px $jnt-primary-color
        )
      ),
      secondary: (
        color: $jnt-secondary-color,
        inverse-color: $jnt-primary-text-color,
        hover-color: $jnt-secondary-dark-color,
        focus: (
          shadow: 0 1px 5px $jnt-secondary-color
        )
      ),
      success: (
        color: $jnt-success-color,
        inverse-color: $jnt-white-color,
        hover-color: $jnt-success-dark-color,
        focus: (
          shadow: 0 1px 5px $jnt-success-color
        )
      ),
      fail: (
        color: $jnt-fail-color,
        inverse-color: $jnt-white-color,
        hover-color: $jnt-fail-dark-color,
        focus: (
          shadow: 0 1px 5px $jnt-fail-color
        )
      )
    ),
    sizes: (
      tiny: (
        padding: 0 $jnt-gutter-normal,
        padding-without-text: 0 $jnt-gutter-tiny,
        font-size: 12px,
        height: 24px,
        badge: (
          size: 20px
        ),
        icon: (
          size: 16px,
          stroke: 1.5px
        ),
        spinner: (
          size: 8px
        )
      ),
      small: (
        padding: 0 $jnt-gutter-normal,
        padding-without-text: 0 $jnt-gutter-small,
        font-size: 14px,
        height: 32px,
        badge: (
          size: 24px
        ),
        icon: (
          size: 16px,
          stroke: 1.5px
        ),
        spinner: (
          size: 12px
        )
      ),
      normal: (
        padding: 0 $jnt-gutter-big,
        padding-without-text: 0 $jnt-gutter-small,
        font-size: 14px,
        height: 40px,
        badge: (
          size: 24px
        ),
        icon: (
          size: 24px,
          stroke: 1.5px
        ),
        spinner: (
          size: 16px
        )
      ),
      large: (
        padding: 0 $jnt-gutter-large,
        padding-without-text: 0 12px,
        font-size: 14px,
        height: 48px,
        badge: (
          size: 24px
        ),
        icon: (
          size: 24px,
          stroke: 1.5px
        ),
        spinner: (
          size: 18px
        )
      )
    )
  );
  $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-button-host)} {
    @if $declare {
      display: inline-flex;
      align-items: center;
      position: relative;
      max-width: 100%;
      #{$wrapper} button[child-of=jnt-button-host] {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .15s ease-in-out,
        background-color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
        outline: 0;
        user-select: none;
        box-sizing: border-box;
        cursor: pointer;
        border: none;
        width: 100%;
        position: relative;
        font-family: inherit;
        line-height: $jnt-line-height-base;
        overflow: hidden;
        [data-text][child-of=jnt-button-host] {
          line-height: 1em;
          white-space: nowrap;
        }
        [data-loading][child-of=jnt-button-host] {
          position: absolute;
        }
      }
      &[data-loading='true'] {
        #{$wrapper} button[child-of=jnt-button-host] {
          cursor: default;
        }
      }
      &[data-width='fluid'] {
        &[data-shape='square'] {
          display: flex;
          flex: 1;
        }
      }
      &[data-shape='circle'][data-with-text='false'] {
        #{$wrapper} button[child-of=jnt-button-host] {
          border-radius: 50%;
        }
      }
    }
    &[data-disabled='true'] {
      @if map-has-key($vars, disabled) {
        $disabled: map-get($vars, disabled);
        opacity: map-get($disabled, opacity);
      }
      @if $declare {
        pointer-events: none;
      }
      #{$wrapper} button[child-of=jnt-button-host] {
        @if $declare {
          cursor: default;
        }
      }
    }
    @if map-has-key($vars, schemes) {
      @each $scheme, $map in map-get($vars, schemes) {
        &[data-scheme='#{$scheme}'] {
          &[data-outline='#{$jnt-outline-fill-name}'] {
            @include button-fill($map, $wrapper);
          }
          &[data-outline='#{$jnt-outline-ghost-name}'] {
            @include button-ghost($map, $wrapper);
          }
          &[data-outline='#{$jnt-outline-transparent-name}'] {
            @include button-transparent($map, $wrapper);
          }
        }
      }
    }
    &[data-scheme][data-outline] {
      @if map-get($vars, background) {
        #{$wrapper} button[child-of=jnt-button-host] {
          background: map-get($vars, background);
        }
      }
      @if map-get($vars, hover-background) {
        #{$wrapper} button[child-of=jnt-button-host]:hover {
          background: map-get($vars, hover-background);
        }
      }
      @if map-get($vars, color) {
        #{$wrapper} button[child-of=jnt-button-host] {
          color: map-get($vars, color);
          [data-icon][child-of=jnt-button-host] {
            @include jnt-icon((color: map-get($vars, color)), '&');
          }
        }
      }
      @if map-get($vars, hover-color) {
        #{$wrapper} button[child-of=jnt-button-host]:hover {
          color: map-get($vars, hover-color);
          [data-icon][child-of=jnt-button-host] {
            @include jnt-icon((color: map-get($vars, hover-color)), '&');
          }
        }
      }
    }
    &[data-scheme][data-outline=#{$jnt-outline-transparent-name}] {
      @if map-get($vars, color) {
        #{$wrapper} button[child-of=jnt-button-host]:focus {
          outline: map-get($vars, color) auto 1px;
        }
        &[data-shape='circle'] {
          #{$wrapper} button[child-of=jnt-button-host]:focus {
            box-shadow: 0 1px 5px map-get($vars, color);
          }
        }
      }
    }
    @if map-has-key($vars, sizes) {
      @each $size, $map in map-get($vars, sizes) {
        &[data-size='#{$size}'] {
          @include button-size($map, $wrapper);
          @if map-has-key($map, badge) {
            $badge: map-get($map, badge);
            #{$wrapper} [data-badge][child-of=jnt-button-host] {
              @include jnt-badge((
                size: map-get($badge, size)
              ), '&');
            }
          }
          @if map-has-key($map, spinner) {
            $spinner: map-get($map, spinner);
            #{$wrapper} [data-loading][child-of=jnt-button-host] {
              width: map-get($spinner, size);
              min-width: map-get($spinner, size);
              height: map-get($spinner, size);
              min-height: map-get($spinner, size);
            }
          }
          @if map-has-key($map, icon) {
            $icon: map-get($map, icon);
            #{$wrapper} [data-icon][child-of=jnt-button-host] {
              @include jnt-icon((
                size: map-get($icon, size),
                stroke: map-get($icon, stroke)
              ), '&');
            }
          }
        }
      }
    }
    &[data-with-text='false'] {
      #{$wrapper} button[child-of=jnt-button-host] {
        border-radius: map-get($vars, without-text-corner);
        @if map-has-key($vars, corners) {
          $corners: map-get($vars, corners);
          @if map-has-key($corners, top) {
            $top: map-get($corners, top);
            border-top-left-radius: map-get($top, left);
            border-top-right-radius: map-get($top, right);
          }
          @if map-has-key($corners, bottom) {
            $bottom: map-get($corners, bottom);
            border-bottom-right-radius: map-get($bottom, right);
            border-bottom-left-radius: map-get($bottom, left);
          }
        }
        [data-icon][child-of=jnt-button-host] {
          line-height: 1;
        }
      }
    }
  }
  #{$context} #{$wrapper} button[child-of=jnt-button-host] {
    border-radius: map-get($vars, corner);
    border: map-get($vars, border);
    box-shadow: map-get($vars, shadow);
    text-transform: map-get($vars, text-transform);
    font-weight: map-get($vars, font-weight);
    @if map-has-key($vars, icon) {
      $icon: map-get($vars, icon);
      #{$wrapper} [data-icon][child-of=jnt-button-host] {
        @include jnt-icon((
          size: map-get($icon, size)
        ), '&');
      }
    }
    @if map-get($vars, padding) != null {
      padding: if(map-get($vars, padding), map-get($vars, padding) !important, null);
    }
    @if map-has-key($vars, corners) {
      $corners: map-get($vars, corners);
      @if map-has-key($corners, top) {
        $top: map-get($corners, top);
        border-top-left-radius: map-get($top, left);
        border-top-right-radius: map-get($top, right);
      }
      @if map-has-key($corners, bottom) {
        $bottom: map-get($corners, bottom);
        border-bottom-right-radius: map-get($bottom, right);
        border-bottom-left-radius: map-get($bottom, left);
      }
    }
    @if map-has-key($vars, borders) {
      $borders: map-get($vars, borders);
      border-right: if(map-get($borders, right), map-get($borders, right) !important, null);
      border-left: if(map-get($borders, left), map-get($borders, left) !important, null);
      border-top: if(map-get($borders, top), map-get($borders, top) !important, null);
      border-bottom: if(map-get($borders, bottom), map-get($borders, bottom) !important, null);
    }
    [data-empty][child-of=jnt-button-host] {
      @if $declare {
        width: 50px;
        height: 10px;
        background-color: $jnt-primary-text-light-color;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'button compiled';
}

@mixin jnt-button-group($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    corner: $jnt-corner-large
  );
  $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-button-group-host)} {
    @if $declare {
      display: inline-flex;
      &[data-width='fluid'] {
        display: flex;
        flex: 1;
        #{$wrapper} [data-button][child-of=jnt-button-group-host] {
          flex: 1;
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-button][child-of=jnt-button-group-host] {
    @if $declare {
      @include jnt-button((
        padding: 0 $jnt-gutter-normal,
        corner: 0,
        without-text-corner: 0
      ), '&');
    }
    &:first-child {
      @include jnt-button((
        corners: (
          top: (
            left: map-get($vars, corner)
          ),
          bottom: (
            left: map-get($vars, corner)
          )
        ),
        borders: (
          right: 0
        )
      ), '&');
    }
    &:last-child {
      @include jnt-button((
        corners: (
          top: (
            right: map-get($vars, corner)
          ),
          bottom: (
            right: map-get($vars, corner)
          )
        ),
        borders: (
          left: 0
        )
      ), '&');
    }
  }
}
@if $jnt-debug {
  @debug 'button-group compiled';
}