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

@mixin jnt-link($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    corner: $jnt-corner-small,
    font-size: $jnt-font-size-base,
    font-weight: null,
    text-transform: null,
    text-decoration: null,
    text-align: null,
    padding: null,
    overflow: false,
    height: null,
    border: null,
    color: $jnt-primary-color,
    inverse-color: $jnt-white-color,
    hover-color: $jnt-primary-dark-color,
    focus: (
      outline: 1px solid $jnt-primary-light-color,
      outline-offset: 3px,
      shadow: null
    ),
    toggle: (
      toggle: true,
      margin-left: $jnt-gutter-small,
      color: $jnt-primary-text-color
    ),
    icon: (
      spacing: $jnt-gutter-tiny,
      color: null,
      size: 18px
    ),
    badge: (
      margin-left: $jnt-gutter-small
    ),
    outlines: (
      transparent: (
        padding: 0,
        color: null,
        hover: (
          color: null,
          background-color: null,
          border-color: null
        ),
        active: (
          underline: true,
          background-color: null,
          color: null,
          underline-color: $jnt-primary-color,
          shadow: null
        ),
        orphan: (
          color: $jnt-primary-text-light-color,
          hover: (
            color: $jnt-primary-text-dark-color,
            background-color: null
          )
        )
      ),
      ghost: (
        padding: $jnt-gutter-tiny $jnt-gutter-small
      ),
      fill: (
        padding: $jnt-gutter-tiny $jnt-gutter-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-link-host)} {
    @if $declare {
      display: inline-block;
      box-sizing: border-box;
      max-width: 100%;
      &[data-disabled='true'] {
        [data-link][child-of=jnt-link-host] {
          opacity: .65;
          pointer-events: none;
          cursor: default;
        }
      }
      &[data-with-title='false'] {
        [data-link][child-of=jnt-link-host] [data-icon][child-of=jnt-link-host] {
          margin-right: 0 !important;
        }
      }
      #{$wrapper} [data-link][child-of=jnt-link-host] {
        text-decoration: none;
        box-sizing: border-box;
        cursor: pointer;
        width: 100%;
        &:focus {
          outline: none;
        }
        [data-title][child-of=jnt-link-host] {
          [data-icon][child-of=jnt-link-host], span[child-of=jnt-link-host] {
            transition: color .2s;
          }
        }
        [data-empty][child-of=jnt-link-host] {
          width: 30px;
          height: 10px;
          background-color: $jnt-primary-text-light-color;
        }
      }
      &[data-context='text'] {
        #{$wrapper} [data-link][child-of=jnt-link-host] {
          display: inline-block;
        }
      }
      &[data-context='box'] {
        #{$wrapper} [data-link][child-of=jnt-link-host] {
          display: flex;
          align-items: center;
          width: 100%;
          [data-title][child-of=jnt-link-host] {
            display: flex;
            align-items: center;
            [data-icon][child-of=jnt-link-host] {
              line-height: 1;
            }
          }
        }
      }
    }
    @if map-has-key($vars, icon) {
      $icon: map-get($vars, icon);
      &[data-position='left'] {
        [data-icon][child-of=jnt-link-host] {
          margin-right: map-get($icon, spacing);
        }
      }
      &[data-position='right'] {
        [data-icon][child-of=jnt-link-host] {
          margin-left: map-get($icon, spacing);
        }
      }
    }
    &[data-outline='#{$jnt-outline-fill-name}'] {
      #{$wrapper} [data-link][child-of=jnt-link-host] {
        color: map-get($vars, inverse-color);
        background-color: map-get($vars, color);
        [data-icon][child-of=jnt-link-host] {
          @include jnt-icon((color: map-get($vars, inverse-color)), '&');
        }
        &:hover {
          background-color: map-get($vars, hover-color);
        }
        &:focus {
          box-shadow: 0 1px 5px map-get($vars, color);
        }
        &[data-active='true'] {
          [data-title][child-of=jnt-link-host] {
            span[child-of=jnt-link-host] {
              border-bottom: 1px solid map-get($vars, inverse-color);
            }
          }
        }
        [data-badge][child-of=jnt-link-host] {
          @include jnt-badge((
            background: if(map-get($vars, inverse-color), map-get($vars, inverse-color) !important, null),
            color: if(map-get($vars, color), map-get($vars, color) !important, null)
          ), '&');
        }
      }
    }
    &[data-outline='#{$jnt-outline-ghost-name}'] {
      #{$wrapper} [data-link][child-of=jnt-link-host] {
        color: map-get($vars, color);
        background-color: transparent;
        border: 1px solid map-get($vars, color);
        [data-icon][child-of=jnt-link-host] {
          @include jnt-icon((color: map-get($vars, color)), '&');
        }
        &:hover {
          background-color: map-get($vars, color);
          color: map-get($vars, inverse-color);
          [data-icon][child-of=jnt-link-host] {
            @include jnt-icon((color: map-get($vars, inverse-color)), '&');
          }
          [data-badge][child-of=jnt-link-host] {
            @include jnt-badge((
              background: if(map-get($vars, inverse-color), map-get($vars, inverse-color) !important, null),
              color: if(map-get($vars, color), map-get($vars, color) !important, null)
            ), '&');
          }
          &[data-active='true'] {
            [data-title][child-of=jnt-link-host] {
              span[child-of=jnt-link-host] {
                border-bottom: 1px solid map-get($vars, inverse-color);
              }
            }
          }
        }
        &:focus {
          box-shadow: 0 1px 5px #{map-get($vars, color)};
        }
        &[data-active='true'] {
          [data-title][child-of=jnt-link-host] {
            span[child-of=jnt-link-host] {
              border-bottom: 1px solid map-get($vars, color);
            }
          }
        }
        [data-badge][child-of=jnt-link-host] {
          @include jnt-badge((
            background: if(map-get($vars, color), map-get($vars, color) !important, null),
            color: if(map-get($vars, inverse-color), map-get($vars, inverse-color) !important, null)
          ), '&');
        }
      }
    }
    &[data-outline='#{$jnt-outline-transparent-name}'] {
      #{$wrapper} [data-link][child-of=jnt-link-host] {
        color: map-get($vars, color);
        [data-icon][child-of=jnt-link-host] {
          @include jnt-icon((color: map-get($vars, color)), '&');
        }
        &:hover {
          color: map-get($vars, hover-color);
          [data-icon][child-of=jnt-link-host] {
            @include jnt-icon((color: map-get($vars, hover-color)), '&');
          }
        }
        &:focus {
          @if map-has-key($vars, focus) {
            $focus: map-get($vars, focus);
            @if map-get($focus, outline) != null {
              outline: map-get($focus, outline);
              outline-offset: map-get($focus, outline-offset);
            }
            @if map-get($focus, shadow) != null {
              outline: 0;
              box-shadow: map-get($focus, shadow);
            }
          }
        }
        &[data-active='true'] {
          [data-title][child-of=jnt-link-host] {
            @if map-has-key($vars, active) {
              $active: map-get($vars, active);
              span[child-of=jnt-link-host] {
                @if map-get($active, underline) == true {
                  border-bottom: 1px solid map-get($active, underline-color);
                }
                @if map-get($active, underline) == false {
                  border: none;
                }
              }
            }
          }
        }
      }
    }
    @if map-has-key($vars, outlines) {
      @each $outline, $map in map-get($vars, outlines) {
        &[data-outline='#{$outline}'] {
          &[data-orphan='true'] {
            @if map-has-key($map, orphan) {
              $orphan: map-get($map, orphan);
              #{$wrapper} [data-link][child-of=jnt-link-host] {
                color: map-get($orphan, color);
                [data-icon][child-of=jnt-link-host] {
                  @include jnt-icon((color: map-get($orphan, color)), '&');
                }
                &:hover {
                  @if map-has-key($orphan, hover) {
                    $hover: map-get($orphan, hover);
                    color: map-get($hover, color);
                    background-color: map-get($hover, background-color);
                    [data-icon][child-of=jnt-link-host] {
                      @include jnt-icon((color: map-get($hover, color)), '&');
                    }
                  }
                }
              }
            }
          }
          #{$wrapper} [data-link][child-of=jnt-link-host] {
            padding: map-get($map, padding);
            color: map-get($map, color);
          }
          @if map-has-key($map, hover) {
            $hover: map-get($map, hover);
            &[data-active='false'] {
              #{$wrapper} [data-link][child-of=jnt-link-host] {
                &:hover {
                  color: map-get($hover, color);
                  background-color: map-get($hover, background-color);
                  [data-icon][child-of=jnt-link-host] {
                    @include jnt-icon((color: map-get($hover, color)), '&');
                  }
                }
              }
            }
          }
          &[data-active='true'] {
            @if map-has-key($map, active) {
              $active: map-get($map, active);
              #{$wrapper} [data-link][child-of=jnt-link-host] {
                background-color: map-get($active, background-color);
                box-shadow: map-get($active, shadow);
                [data-title][child-of=jnt-link-host] {
                  color: map-get($active, color);
                  [data-icon][child-of=jnt-link-host] {
                    @include jnt-icon((color: map-get($active, color)), '&');
                  }
                  span[child-of=jnt-link-host] {
                    @if map-get($active, underline) == true {
                      border-bottom: 1px solid map-get($active, underline-color);
                    }
                    @if map-get($active, underline) == false {
                      border: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  #{$context} #{$wrapper} [data-link][child-of=jnt-link-host] {
    @if map-has-key($vars, toggle) {
      $toggle: map-get($vars, toggle);
      @if map-get($toggle, toggle) == false {
        [data-toggle][child-of=jnt-link-host] {
          display: none;
        }
      }
      [data-toggle][child-of=jnt-link-host] {
        margin-left: map-get($toggle, margin-left);
        margin-right: 0;
        @include jnt-icon((color: map-get($toggle, color)), '&');
      }
    }
    border-radius: map-get($vars, corner);
    padding: if(map-get($vars, padding), map-get($vars, padding) !important, null);
    height: map-get($vars, height);
    font-size: map-get($vars, font-size);
    font-weight: map-get($vars, font-weight);
    text-transform: map-get($vars, text-transform);
    text-decoration: map-get($vars, text-decoration);
    text-align: map-get($vars, text-align);
    border: if(map-get($vars, border), map-get($vars, border) !important, null);
    [data-title][child-of=jnt-link-host] {
      @if $declare {
        margin-right: auto;
      }
      @if map-has-key($vars, icon) {
        $icon: map-get($vars, icon);
        [data-icon][child-of=jnt-link-host] {
          @include jnt-icon((
            color: map-get($icon, color),
            sizes: (
              auto: (
                size: map-get($icon, size)
              )
            )
          ), '&');
        }
      }
      @if map-get($vars, overflow) == true {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 100%;
        white-space: nowrap;
      }
    }
    @if map-has-key($vars, badge) {
      $badge: map-get($vars, badge);
      [data-badge][child-of=jnt-link-host] {
        margin-left: map-get($badge, margin-left);
      }
    }
  }
}
@if $jnt-debug {
  @debug 'link compiled';
}