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

@mixin jnt-chart($passed: (), $context: null, $strategy: 'changes') {
  $defs: (
    width: null,
    height: null,
    fill: null
  );
  $vars: $passed;
  $declare: false;
  @if $passed == () or $strategy == 'merge' {
    $vars: recursive-map-merge($defs, $passed);
    $declare: true;
  }
  #{if($context, $context, $jnt-chart-host)} {
    @if $declare {
      @include reset-default();
      display: flex;
    }
  }
  #{$context} [data-wrapper][child-of=jnt-chart-host] {
    @if $declare {
      flex: 1;
    }
    table[child-of=jnt-chart-host] {
      @if $declare {
        border-spacing: 0;
        width: 100%;
      }
      td[child-of=jnt-chart-host], th[child-of=jnt-chart-host] {
        @if $declare {
          text-align: left;
          vertical-align: middle;
          padding: 0 $jnt-gutter-small;
          &:first-child {
            padding: 0 $jnt-gutter-large;
          }
        }
      }
      thead[child-of=jnt-chart-host] {
        @if $declare {
          background-color: $jnt-secondary-background;
        }
      }
      tbody[child-of=jnt-chart-host] {
        tr[child-of=jnt-chart-host] {
          @if $declare {
            cursor: pointer;
            position: relative;
            &:hover, &[selected='true'] {
              td[child-of=jnt-chart-host] {
                background-color: $jnt-purple-light-color;
                color: $jnt-white-color;
              }
            }
            &:not(:last-child) {
              td[child-of=jnt-chart-host]:not(:last-child) {
                border-bottom: 1px solid $jnt-muted-color;
              }
            }
            &:last-child {
              td[child-of=jnt-chart-host]:first-child {
                border-bottom-left-radius: $jnt-corner-normal;
              }
            }
            &[data-nodata] {
              height: 200px;
              pointer-events: none;
              border-bottom: 0;
              td[child-of=jnt-chart-host] {
                vertical-align: middle;
                text-align: center;
                padding: $jnt-gutter-normal;
                [data-icon][child-of=jnt-chart-host] {
                  @include jnt-icon((
                    color: $jnt-muted-color,
                    size: 80px
                  ), '&');
                }
              }
              &:last-child {
                td[child-of=jnt-chart-host]:last-child {
                  border-bottom-right-radius: $jnt-corner-normal;
                }
              }
            }
          }
        }
        td[child-of=jnt-chart-host] {
          @if $declare {
            background-color: $jnt-primary-background;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            min-width: 50px;
            width: 50px;
            max-width: 100px;
            text-align: right;
            user-select: none;
            &:first-child {
              text-align: left;
              min-width: 150px;
              width: 300px;
            }
            &:last-child {
              color: $jnt-gray-900-color;
              text-align: center;
            }
            [data-content][child-of=jnt-chart-host] {
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  #{$context} svg[child-of=jnt-chart-host] {
    @if $declare {
      background-color: $jnt-secondary-background;
      text[child-of=jnt-chart-host] {
        fill: $jnt-white-color;
      }
    }
  }
}
@if $jnt-debug {
  @debug 'chart compiled';
}