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

$tab-marker-height: 4px;
@mixin jnt-tabs($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-tabs-host)} {
    @if $declare {
      display: block;
      max-width: 100%;
      padding: $jnt-gutter-small $jnt-gutter-normal $jnt-gutter-normal $jnt-gutter-normal;
      background-color: $jnt-primary-background;
      border-top-left-radius: $jnt-corner-normal;
      border-top-right-radius: $jnt-corner-normal;
      border: 1px solid $jnt-page-background;
      &[data-outline='#{$jnt-outline-fill-name}'] {
        [data-content][child-of=jnt-tabs-host] {
          background-color: $jnt-primary-background;
          box-sizing: border-box;
          border-bottom-left-radius: $jnt-corner-normal;
          border-bottom-right-radius: $jnt-corner-normal;
        }
      }
      &[data-outline='#{$jnt-outline-transparent-name}'] {
        [data-content][child-of=jnt-tabs-host] {
          background-color: transparent;
        }
      }
    }
  }
  #{$context} [data-tabs][child-of=jnt-tabs-host] {
    @if $declare {
      border-top-left-radius: $jnt-corner-normal;
      border-top-right-radius: $jnt-corner-normal;
      border-bottom: 2px solid $jnt-secondary-color;
    }
    [data-wrapper][child-of=jnt-tabs-host] {
      @if $declare {
        position: relative;
        text-decoration: none;
        display: block;
        &:after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
          height: $tab-marker-height;
          border-radius: 5px;
          display: none;
        }
        &:hover {
          [data-tab][child-of=jnt-tabs-host] {
            color: $jnt-primary-light-color;
            [data-label][child-of=jnt-tabs-host] [data-icon][child-of=jnt-tabs-host] {
              @include jnt-icon((color: $jnt-primary-light-color), '&');
            }
          }
          &:after {
            display: block;
            background-color: $jnt-secondary-dark-color;
          }
        }
      }
      &[data-active='true'] {
        [data-tab][child-of=jnt-tabs-host] {
          @if $declare {
            color: $jnt-primary-light-color;
          }
          [data-label][child-of=jnt-tabs-host] [data-icon][child-of=jnt-tabs-host] {
            @include jnt-icon((color: $jnt-primary-light-color), '&');
          }
        }
        &:after {
          @if $declare {
            display: block;
            background-color: $jnt-primary-light-color;
          }
        }
      }
      [data-tab][child-of=jnt-tabs-host] {
        @if $declare {
          padding: $jnt-gutter-small $jnt-gutter-normal ($jnt-gutter-small + $tab-marker-height) $jnt-gutter-normal;
          cursor: pointer;
          color: $jnt-primary-text-color;
          font-size: $jnt-font-size-base;
          line-height: 1.6;
          position: relative;
          user-select: none;
          max-width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        [data-label][child-of=jnt-tabs-host] {
          @if $declare {
            position: relative;
            z-index: 1;
          }
          [data-badge][child-of=jnt-tabs-host] {
            @include jnt-badge((size: 21px), '&');
          }
          [data-icon][child-of=jnt-tabs-host] {
            position: relative;
            z-index: 1;
            @include jnt-icon((color: $jnt-primary-text-color), '&');
          }
        }
        [data-ripple][child-of=jnt-tabs-host] {
          @if $declare {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background-color: $jnt-secondary-background;
            height: 50px;
            width: 50px;
          }
        }
      }
    }
  }
  #{$context} [data-content][child-of=jnt-tabs-host] {
    @if $declare {
      position: relative;
      padding: $jnt-gutter-normal 0;
    }
  }
}
@if $jnt-debug {
  @debug 'tabs compiled';
}