$navbar-height: 52px;
$main-color: #3498db;

.bb-waterfall-view {
  flex: 1;
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;

  .header {
    position: relative;
    z-index: 1;
    height: 100px;
    line-height: 100px;
    margin-bottom: 2px;
    // @FIXME: add a bit of margin-right in order to be able to see the rotated titles.
    margin-right: -150px;
    vertical-align: middle;

    .header-content {
      height: 100%;
      overflow: hidden;

      svg {
        width: 100%;
        height: 100%;
      }

      .axis {
        .domain {
          fill: none;
        }

        &.x {
          .tick {
            a {
              text-decoration: none;
            }

            text {
              fill: $main-color;
              font-size: 12px;
            }

            line {
              stroke-width: 20px;
            }
          }
        }
      }
    }
  }

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

    .inner-content {
      position: absolute;
      top: 0;
      bottom: 110px;
      overflow-y: auto;
      overflow-x: visible;
      width: 100%;

      .svg-container {
        position: relative;
        width: 100%;
        height: 16000px;

        svg {
          width: 100%;
          height: 100%;

          .chart {
            .builder {
              .build {
                cursor: pointer;

                rect,
                polygon {
                  stroke: $main-color;
                  stroke-width: 1px;
                }

                polygon {
                  fill: #fff;
                }

                .buildstep {
                  text {
                    font-size: 12px;
                  }
                }
              }

              text.id {
                fill: $main-color;
                font-size: 12px;
                text-anchor: middle;
              }

              circle {
                stroke: $main-color;
                stroke-width: 1px;
              }
            }
          }

          .axis {
            .domain {
              fill: none;
            }

            &.y {
              .tick {
                text {
                  fill: $main-color;
                  font-size: 10px;
                }

                line {
                  stroke: $main-color;
                  stroke-width: 1px;
                }
              }
            }
          }
        }
      }
    }
  }

  .fill {
    &.results_SUCCESS {
      fill: #88dd33;
    }
    &.results_WARNINGS {
      fill: #ffaa33;
    }
    &.results_FAILURE {
      fill: #ee8888;
    }
    &.results_SKIPPED {
      fill: #aaddee;
    }
    &.results_EXCEPTION {
      fill: #cc66cc;
    }
    &.results_RETRY {
      fill: #eecccc;
    }
    // ?
    &.results_CANCELLED {
      fill: #eecccc;
    }
    &.results_PENDING {
      fill: #e7d100;
    }
    &.results_UNKNOWN {
      fill: #eeeeee;
    }
  }

  .stroke {
    &.results_SUCCESS {
      stroke: #88dd33;
    }
    &.results_WARNINGS {
      stroke: #ffaa33;
    }
    &.results_FAILURE {
      stroke: #ee8888;
    }
    &.results_SKIPPED {
      stroke: #aaddee;
    }
    &.results_EXCEPTION {
      stroke: #cc66cc;
    }
    &.results_RETRY {
      stroke: #eecccc;
    }
    // ?
    &.results_CANCELLED {
      stroke: #eecccc;
    }
    &.results_PENDING {
      stroke: #e7d100;
    }
    &.results_UNKNOWN {
      stroke: #eeeeee;
    }
  }
}

.svg-tooltip {
  pointer-events: none;
}
