@import "theme-mixin";

.themeMixin({
  :host {
    .volume-cell {
      &.border-bottom {
        border-bottom: @border-color-base 1px solid;
      }

      &.hovered{
        background-color: fade(@primary-color, 15%);
        opacity: 0.75;
      }

      &.max-volume {
        border: @text-max-contrast-color 1px solid;
        font-weight: @font-weight-bold;
        background-color: fade(@warning-color, 15%);
      }
    }

    .grid-line {
      border-color: @table-border-color;
    }
  }
});

.container {
  height: 100%;
  min-width: 25px;

  .volume-cell {
    text-align: right;
    box-sizing: border-box;

    .highlighter {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
    }
  }

  .grid-line {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    border-bottom-style: solid;
    @border-width: 1px;

    &.minor {
      @minor-border-width: @border-width;
      border-bottom-width: @minor-border-width;
      height: calc(50% + @minor-border-width);
    }

    &.major {
      @major-border-width: @border-width * 2;
      border-bottom-width: @major-border-width;
      height: calc(50% + @major-border-width);
    }
  }
}
