@import '../../imports';

.bar-chart {
  .measure-bar-charts {
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: $vis-h-padding;
  }

  .scroller {
    position: relative;
    height: 100%;

    .bottom-shadow {
      opacity: 0;
    }
  }

  .selection-highlight-container {
    position: absolute;

    .selection-highlight {
      pointer-events: none;
      border: 1px dashed $brand;
    }
  }

  .vertical-axis .border {
    stroke-width: 0;
  }

  .x-axis {
    stroke: $gray;
    stroke-width: 1px;

    .slanty-labels {
      position: absolute;
      overflow: hidden;
    }

    .slanty-label {
      @include ellipsis;
      position: absolute;
      width: 100px;
      height: 20px;
      transform: rotate(-43deg);
      transform-origin: right top;
      text-align: right;
      cursor: default;
      overflow: hidden;
      font-size: 12px;

      &.categorical {
        top: 3px;
      }

      &.continuous {
        top: 6px;
      }
    }
  }

  .measure-bar-chart {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid $gray;
      border-right: 1px solid $gray;
    }

    &:first-child:after {
      top: 10px;
    }

    .vis-measure-label {
      position: absolute;
      left: 6px;
      top: 12px;
    }

    .vis-bottom {
      pointer-events: none;
      stroke: $gray;
    }

    g.bars {
      g.bar {
        &.not-selected {
          fill-opacity: 0.5;
        }

        &.hover {
          fill-opacity: 0.9;
        }

        > rect.background {
          pointer-events: none;
          fill: $brand;
        }

        > rect.mouse-event-target {
          fill: $white;
          fill-opacity: 0.001;
        }
      }
    }

    .mask {
      fill: $white;
    }
  }
}