@import '../global';

@mixin sencha-charts {
  @include sencha-draw;

  $legend-border-color: #ccc !default;
  $legend-border: 1px solid $legend-border-color !default;
  $legend-background-color: #fff !default;
  $legend-z-index: 10 !default;
  $legend-item-border: 1px solid rgba($legend-border-color, .5) !default;
  $legend-item-background: rgba(#fff, 0) !default;
  $legend-item-color: #333 !default;
  $marker-size: .8em !default;

  .x-legend {
    .x-legend-inner {
      .x-legend-container {
        @include border-radius(5px);
        border: $legend-border;
        background: $legend-background-color;

        //@if (lightness($legend-background-color) > 30) {
        //  @include box-shadow(rgba(#fff, .6) 0 1px 1px);
        //} @else {
        //  @include box-shadow(rgba(#fff, .2) 0 1px 0);
        //}
        .x-legend-item {
          padding: .8em 1em .8em $marker-size + 1em;
          color: $legend-item-color;
          background: $legend-item-background;
          max-width: 20em;
          min-width: 0;
          font-size: 14px;
          line-height: 14px;
          font-weight: bold;
          white-space: nowrap;
          position: relative;

          .x-legend-inactive {
            @include opacity(.3);
          }

          .x-legend-item-marker {
            position: absolute;
            width: $marker-size;
            height: $marker-size;
            @include border-radius($marker-size/2);
            @include box-shadow(rgba(#fff, .3) 0 1px 0, rgba(#000, .4) 0 1px 0 inset);
            left: .7em;
            top: 1em;
          }
        }
      }
    }
    
    &.x-docked-top, &.x-docked-bottom {
      .x-legend-item {
        border-right: $legend-item-border;
        &:last-child {
          border-right: 0;
        }
      }
    }
    
    &.x-docked-left, &.x-docked-right {
      .x-legend-inner {
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
      }
    }
  }

  .x-legend-button-icon {
    -webkit-mask-image: theme-image('default', 'pictos/list.png');
  }

  .x-panzoom-toggle-icon {
    -webkit-mask-image: theme-image('default', 'pictos/move.png');
  }

  .x-zooming > .x-panzoom-toggle-icon {
    -webkit-mask-image: theme-image('default', 'pictos/resize.png');
  }

  .x-chart-toolbar {
    position: absolute;
    z-index: 9;
    @include display-box;
    padding: .6em;

    .x-button {
      margin: .2em;
    }

    &[data-side=left], &[data-side=right] {
      top: 0;
      @include box-orient(vertical);
    }

    &[data-side=left] {
      left: 0;
    }

    &[data-side=right] {
      right: 0;
    }

    &[data-side=top], &[data-side=bottom] {
      @include box-orient(horizontal);
      right: 0;
    }

    &[data-side=top] {
      top: 0;
    }

    &[data-side=bottom] {
      bottom: 0;
      @include box-orient(horizontal);
    }
  }

  @if $include-default-icons {
    @include pictos-iconmask('bookmarks');
    @include pictos-iconmask('download');
    @include pictos-iconmask('favorites');
    @include pictos-iconmask('info');
    @include pictos-iconmask('more');
    @include pictos-iconmask('time');
    @include pictos-iconmask('user');
    @include pictos-iconmask('team');
  }
}