// Chart - Svg and Css
//==================================================//

// Dependencies
// popupmenu
// tooltip

.widget:not(.auto-height) {
  .chart-container {
    &.has-bottom-legend.auto-height {
      .chart-legend.is-bottom {
        margin-top: unset;
      }
    }

    .chart-legend.is-bottom {
      .chart-legend-item.is-one-line {
        margin: 0 auto !important;
        padding: 0 2px 1px;

        + .list-button {
          margin-top: 3px;
        }
      }
    }
  }

}

.axis-labels  {
  font-size: 1.5rem;
}

// Alternate Text message
.chart-message {
  background-color: $ids-color-palette-ruby-10;
  color: $font-color-highcontrast;
  padding: 20px;
  text-align: center;
}

// SVG Chart Styles
.chart-container {
  overflow: hidden;

  .chart-legend {
    &.is-bottom {
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;

      .chart-legend-item.is-two-column {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-basis: content;

        .chart-legend-color {
          min-height: 20px;
          min-width: 20px;
        }

        .chart-legend-item-text {
          top: -1px;
          line-height: 22px;
        }
      }
    }

    .chart-legend-title {
      color: $chart-legend-title-color;
      display: block;
      font-weight: 600;
      margin-bottom: 2px;
    }
  }

  // Center
  svg {
    display: block;
    margin: 0 auto;
  }

  // Line Colors - and Visibility
  .axis {
    path,
    line {
      fill: none;
      shape-rendering: crispEdges;
      stroke: $chart-line-color;
    }

    .tick0 line {
      stroke: $chart-line-color-axis;
    }

    &.x .domain,
    &.y .domain {
      stroke: transparent;
    }
  }

  // Text Color
  .text,
  text {
    @include antialiased();

    color: $chart-container-text-color;
    fill: $chart-container-text-color;
    font-size: $ids-size-font-sm;

    &::selection {
      color: $inverse-color;
      fill: $inverse-color;
    }

    &::-moz-selection {
      color: $inverse-color;
      fill: $inverse-color;
    }
  }

  .inverse {
    fill: $chart-font-color-inverse;
  }

  .chart-donut-text {
    font-size: $ids-size-font-lg;
  }

  .label-line {
    stroke: $chart-line-color;
  }

  .label-circle {
    fill: $chart-line-color;
  }

  // Svg Hidden
  .is-hidden {
    @include opacity(0);
  }

  .list-button {
    float: right;
    margin-right: 20px;
    margin-top: -1px;
    margin-bottom: 1px;
  }

  // Right aligned Legend
  &.has-right-legend {
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: center;

    svg {
      width: 75%;
    }

    .chart-legend {
      border-top: 0;
      margin: 30px;
      width: 30%;

      .is-two-column {
        display: inline-flex;
        float: none;
        margin: 1px -5px;
        min-width: 58%;
        padding: 4px 5px;
        width: auto;
      }

      .chart-legend-color {
        height: 14px;
        margin: 0;
        min-width: 14px;
        max-width: 14px;
      }

      .chart-legend-item-text {
        color: $chart-legend-item-text-color;
        font-weight: 400;
        padding-left: 7px;
        position: relative;
        white-space: pre-line;
        flex: auto;
      }
    }
  }

  &.empty-message {
    @include vertical-align();

    margin-top: -20px;
  }

  .ellipsis {
    display: block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

// Tooltip Swatch
.chart-swatch {
  display: table;

  .swatch-caption {
    display: table-caption;
    margin-bottom: 0.7em;
    text-align: center;

    .indicator-box {
      display: inline-block;
      height: 14px;
      margin-right: 10px;
      width: 14px;
    }

    b {
      position: relative;
      top: -2px;
    }
  }

  .swatch-row {
    display: table-row;
    height: 20px;

    div {
      border-bottom: 9px solid $tooltip-bg-color;
      display: table-cell;
      height: 14px;
      width: 14px;
    }

    span,
    b {
      color: $tooltip-color;
      display: table-cell;
      line-height: 12px;
      padding: 0 5px;
    }

    b {
      padding: 0;
    }

    br {
      display: block;
      margin: 5px 0;
    }
  }

  &.line .swatch-caption b {
    display: inline-block;
  }
}

.chart-tooltip-total {
  color: $tooltip-color;
  display: block;
  margin-bottom: 10px;
  text-align: center;
}

.chart-tooltip-value {
  color: $tooltip-color;
  display: block;
  text-align: center;
}

// Legend Styling
.chart-legend {
  margin-left: 50px;
  margin-top: -9px;

  &.is-bottom {
    margin: 0 auto;
    padding-bottom: 1em;
    padding-top: 0.5em;

    &.adjusted-height {
      .chart-legend-item {
        align-items: center;
        display: flex !important;
        font-size: 0;
        padding: 0 4px 2px;

        &.is-two-column {
          padding: 2px 5px 4px 2px;
        }
      }

      .chart-legend-item-text {
        position: relative;
      }
    }
  }

  &.is-right {
    border-top: 1px solid $panel-border-color;
    margin: 0 auto;
    padding-bottom: 1em;
    padding-top: 1em;
  }

  .chart-legend-item {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    cursor: pointer;
    float: left;
    margin: 7px 10px 7px 0;
    outline: none;
    padding: 4px 2px 1px 3px !important;

    &[tabindex='-1'] {
      cursor: inherit;
    }

    &[tabindex='0']:focus {
      border-color: $input-color-focus-border;
      border-radius: 4px;

      // Removed box shadow to match current style
      box-shadow: 0 0 4px 1px $focus-box-shadow-color;
      outline: none;
    }

    &.is-two-column {
      align-items: center;
      display: inline-block;
      float: none;
      margin: 0;
      padding: 0;
      width: 160px;
    }

    &.is-one-line {
      height: inherit;
      padding: 0;
      min-height: 28px;
    }
  }

  .chart-legend-color {
    display: inline-block;
    height: 12px;
    margin-right: 10px;
    position: relative;
    width: 12px;
  }

  .chart-legend-item-text {
    @include ellipsis;

    color: $chart-font-color;
    font-size: $ids-size-font-sm;
    line-height: 1.4rem;
    width: auto;
  }

  .lg {
    .chart-legend-color {
      height: 20px;
      width: 20px;
    }

    .chart-legend-item-text {
      vertical-align: super;
      white-space: normal;
    }
  }
}

// Legend Popup Styling
.chart-popup-menu {
  display: flex;
  height: 40px;

  .chart-popup-menu-color {
    height: 15px;
    width: 15px;
    margin: 12px 8px 0 0;
  }

  .chart-popup-menu-text {
    font-family: $ids-font-family-base;
    font-size: $ids-size-font-xs;
    line-height: 38px;
  }
}

// Spark Line Charts
.sparkline {
  // height: 70px;
  // margin: 50px auto;
  // position: relative;
  // width: 200px;

  path {
    fill: none;
    stroke-width: 2px;
  }

  .bar-rect {
    fill: transparent;
    stroke-width: 0;
  }

  .point {
    stroke-width: 2;
  }

  .is-not-selected {
    opacity: 0.35;
  }
}

.chart-vertical-bar {
  text {
    text-align: left;
  }
}

.chart-targeted-achievement {
  color: $label-color;
  display: block;
  font-size: $label-size-regular-font-size;

  .bar {
    background-color: $chart-targeted-achievement-bg-color;
    border-radius: 2px;
    cursor: default;
    height: $input-size-compact-height !important;
    margin-top: -2px;

    &.completed {
      margin-bottom: 5px;
      margin-top: -($input-size-compact-height);
      max-width: 100%;
    }
  }

  .target::after,
  .completed::after {
    content: none !important;
  }

  .remaining {
    background:
      repeating-linear-gradient(
        150deg,
        $ids-color-palette-azure-40,
        $ids-color-palette-azure-40 1px,
        $ids-color-palette-azure-20 1px,
        $ids-color-palette-azure-20 10px
      );
  }

  //Labels
  .completed {
    .value {
      display: none;
    }

    span {
      color: $font-color !important;
      font-size: $ids-size-font-base;
      font-weight: $ids-number-font-weight-base;
      right: auto;
      top: 20px;
    }
  }

  .target .value {
    display: none;
  }

  .icon-error {
    display: inline-block;
    height: 16px;
    margin-bottom: 1px;
    margin-right: 0;
    width: 16px;
  }
}

.colored.label {
  color: $ids-color-palette-turquoise-60;

  &.amethyst07 {
    background-color: transparent;
    color: $ids-color-palette-amethyst-70;

    .value {
      color: $ids-color-palette-amethyst-70;
    }
  }

  span {
    background: transparent;
    color: $font-color;
  }

  .value {
    color: $ids-color-palette-turquoise-60;

    &.error-color,
    &.error {
      color: $error-color;
    }

    &.alert {
      color: $ids-color-status-warning;
    }

    &.alert-yellow {
      color: $ids-color-status-caution;
    }

    &.alert-neutral {
      color: $alert-neutral;
    }

    &.dark {
      color: $chart-progressbar-dark-fill;
    }

    &.good {
      color: $ids-color-status-success;
    }

    &.primary {
      color: $chart-progressbar-primary-fill;
    }
  }
}

// Move Pattern Swatches Off Screen
.svg-patterns {
  position: fixed;
  top: -9999999px;
}

// Temporary fix for SVG Tooltip
#svg-tooltip.tooltip {
  &.top,
  &.bottom {
    .arrow {
      left: calc(50% - 6px);
    }
  }

  &.left,
  &.right {
    .arrow {
      top: calc(50% - 6px);
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .chart-legend:not(.is-bottom) {
    margin-left: inherit;
    margin-right: 55px;

    .chart-legend-color {
      margin-left: 10px;
      margin-right: inherit;
    }

    .chart-legend-item {
      float: right;
      margin-left: 10px;
      margin-right: 0;
    }
  }

  .chart-legend.is-bottom {
    .chart-legend-color {
      margin-left: 10px;
      margin-right: 0;
    }
  }

  .completion-chart {
    .icon-error {
      left: -20px;
    }

    &.chart-targeted-achievement {
      .icon-error {
        left: -1px;
        right: auto;
      }
    }
  }

  // Progess Bar Charts
  .chart-completion-target,
  .chart-completion {
    span:not(.audible) {
      left: 2px;
      right: auto;
      text-align: left;
    }

    .completed {
      border-left: 1px solid $chart-progressbar-bg-color;
      border-right: 0 solid $chart-progressbar-bg-color;

      &::after {
        left: auto;
        right: 100%;
      }
    }

    .target {
      span:not(.audible) {
        left: -2px;
        right: auto;
        text-align: right;
      }

      &::after {
        left: auto;
        right: 100%;
      }
    }

    .target-line {
      left: auto;
      right: 45px;
    }
  }

  .sparkline,
  .chart-container.line-chart,
  .chart-container.bullet-chart,
  .chart-container.column-chart,
  .chart-container.chart-vertical-bar {
    svg {
      @include css3(transform, scale(-1, 1));

      text {
        @include css3(transform, scale(-1, 1));

        &.dir-ltr,
        &.negative,
        &.negative-value {
          direction: ltr;
        }
      }

      tspan {
        unicode-bidi: embed;
      }

      .axis.y {
        text {
          text-anchor: start;
        }
      }

      .axis-labels {
        text {
          @include css3(transform, inherit);
        }
      }
    }
  }

  .chart-container.column-chart {
    svg {
      .axis.y {
        text {
          &.positive-value {
            text-anchor: middle;
          }

          &.negative-value {
            text-anchor: end;
          }
        }
      }
    }
  }
}

.sparkline-tooltip {
  line-height: 5px !important;

  b {
    line-height: 22px;
  }
}