AugurProject/augur-ui

@import (reference) "~assets/styles/shared";

.MarketOutcomeDepth {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-right: 30px;
}

.MarketOutcomeDepth__depth-hover-values {
  &:extend(.caps--small all);

  display: flex;
}

.MarketOutcomeDepth__hover-depth {
  display: flex;
}

.MarketOutcomeDepth__depth-hover-title {
  color: @color-white;
  margin-right: 0.3em;
}

.MarketOutcomeDepth__depth-hover-value {
  color: @color-lightgray;
  width: 5em;
}

.MarketOutcomeDepth__container {
  cursor: cell;
  flex: 1;

  :global {
    #depth_chart {
      padding-left: 10px;
      position: absolute;
    }

    #hovered_price_label {
      .caps--small();

      stroke: @color-white;
    }

    #depth_range_bounds {
      .bounding-box {
        fill: @color-white;
        opacity: 0.05;
      }
    }

    .bounding-line,
    .tick-line,
    .tick-line--midpoint {
      stroke: @color-gray;
    }

    .tick-line--midpoint {
      opacity: 0.5;
      stroke-dasharray: 3;
    }

    .tick-line {
      color: @color-lightergray;
      stroke-width: 1px;
    }

    .depth-line-bids {
      fill: none;
      stroke: @color-positive;
    }

    .depth-line-asks {
      fill: none;
      stroke: @color-negative;
    }

    .tick-value-midpoint,
    .tick-value {
      &:extend(.caps--extra-small all);

      fill: @color-lightgray;
    }

    .tick-value-midpoint {
      font-size: @font-size-small;
      text-transform: none;
    }

    .stop-top-bid {
      stop-color: transparent;
    }

    .stop-top-ask {
      stop-color: transparent;
    }

    .stop-bottom-ask {
      stop-color: @color-negative;
    }

    .stop-bottom {
      stop-color: @color-positive;
    }

    .filled-subtle-asks {
      fill: url("#subtleGradientAsk");
      opacity: 0.25;
    }

    .filled-subtle-bids {
      fill: url("#subtleGradientBid");
      opacity: 0.25;
    }

    .line .crosshair {
      fill: none;
      stroke: @color-white;
      stroke-dasharray: 5;
    }

    .overlay {
      fill: none;
      pointer-events: visible;
    }

    #depth-x-axis {
      line {
        stroke: @color-white;
      }

      text {
        fill: @color-lightgray;
      }
    }
  }
}