.chart{
  &-wrapper{
    //display: inline-block;
    text-align: center;
    margin: $box-padding 0;
    svg{
      width: 100%;
    }
  }
  &-gauge{
    @extend %chart;

  }
  &-grid{
    text-align: center;
    .chart{
      &-wrapper{
        display: inline-block;
        width: 300px;
      }
    }
  }
}
.easy_query_chart {
  //margin-left: -.5*$box-padding;
  //margin-right: -$box-padding;
  @extend %pseudo-before;
  &:before{
    top: 0;
    bottom: 0;
    left: -$box-padding;
    right: -$box-padding;
    background: $color-foreground;
    z-index: 0;
  }
  .box &, .easy-content-page &{
    //margin-left: -$box-padding;
  }

  @include respond-to(min-sidebar-collapse){
    .tick{
      tspan + tspan{
        display: none;
      }
    }
  }
  .fake-responsive &{
    .tick{
      tspan + tspan{
        display: none;
      }
    }
  }

  svg {
    min-height: 300px;
    max-width: 100%;
    position: relative;
    z-index: 1;
  }

  .tick.zero line {
    opacity: 0;
  }
}

.c3{
  //line,path{
  //  stroke: $color-text-muted !important;
  //}
  &.fake-responsive{
    text {
      display: none;
    }
  }
  text{
    fill: $color-text-muted;
  }
  &-y{
    &grid{
      //&:last-child, &:first-child{
      //  display: none;
      //}
    }
  }
  &-bar{
    stroke: $color-foreground !important;
    stroke-width: 3px !important;
  }
  &-axis{
    &-x{
      path,line,text{
        @include translateY($box-padding);
      }
      tspan{
        & + tspan{
          display: none;
        }
      }
    }
    &-y{
      path,line,text{
        @include translateX(-.5*$box-padding);
      }
      &-label{
       @include transform(translateX(-.5*$box-padding) rotate(-90deg) !important);
      }
      .domain{
        display: none;
      }
    }
    line,path{
      fill: mute-color($color-text-muted);
      stroke: $color-text-muted !important;
      opacity: .25;
    }
  }
  &-chart{
    &-texts{
      font-size: $font-h3;
    }
    &-arcs{
      &-background{
        stroke: none !important;
        fill: $color-text-muted !important;
        opacity: .25;
      }
    }
  }
  &-grid{
    opacity: .25;
  }
  &-title{
    @include translateY(1.25*$gap);
    font-size: $font-h2 !important;
  }
  &-tooltip{
    //@extend %material__elevation--depth_2;
    opacity: 1 !important;
    & > tbody > tr{
      border: none;
      th{
        background: $color-foreground;
        color: $color-text;
        font-size: $font-size;
        border: none;
      }
      td{
        font-size: $font-size;
        border: none;
      }
    }
  }

  &.is-rotated {
    .c3-axis {
      &-x {
        path, line, text {
          @include transform(unset);
        }
        &-label {
          display: none;
        }
      }
      &-y {
        path,line,text{
          @include transform(unset);
        }
        tspan{
          & + tspan{
            display: none;
          }
        }
      }
    }
  }

  //@for $i from 1 through length($palette) {
  //  //&-bar,&-pie,&-text,&-circle{
  //  //  &:nth-of-type(#{$i - 1}){ //&-#{$i - 1}
  //  //    @include chart-scheme(nth($palette, $i));
  //  //  }
  //  //}
  //  //&-chart-arc{
  //  //  &:nth-of-type(#{$i - 1}){ //&-#{$i - 1}
  //  //    path{
  //  //      @include chart-scheme(nth($palette, $i));
  //  //    }
  //  //  }
  //  //}
  //}
}

.easy-chart{
  &-listing-links{
    @extend %calendar-listing-links;
  }
}