@import "../module/**/*.less";

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

.waterfall {
  position: absolute;
  top: @navbar-height;
  left: 20px;
  bottom: 0;
  right: 0;
  width: auto;
  overflow-x: auto;
  overflow-y: hidden;

  .load-indicator {
    position: fixed;
    top: @navbar-height;
    left: 20px;
    padding-right: 20px;
    width: 100%;
    height: 100%;
    z-index: 900;
    background-color: #ffffff;
    display: table;

    .spinner {
      display: table-cell;
      vertical-align: middle;
      text-align: center;

      p {
        font-weight: 300;
        margin-top: 10px;
      }
    }
  }

  .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 {
    &.success {
      fill: #88DD33;
    }
    &.warnings {
      fill: #FFAA33;
    }
    &.failure {
      fill: #EE8888;
    }
    &.skipped {
      fill: #AADDEE;
    }
    &.exception {
      fill: #CC66CC;
    }
    &.retry {
      fill: #EECCCC;
    }
    // ?
    &.cancelled {
      fill: #EECCCC;
    }
    &.pending {
      fill: #E7D100;
    }
    &.unknown {
      fill: #EEEEEE;
    }
  }

  .stroke {
    &.success {
      stroke: #88DD33;
    }
    &.warnings {
      stroke: #FFAA33;
    }
    &.failure {
      stroke: #EE8888;
    }
    &.skipped {
      stroke: #AADDEE;
    }
    &.exception {
      stroke: #CC66CC;
    }
    &.retry {
      stroke: #EECCCC;
    }
    // ?
    &.cancelled {
      stroke: #EECCCC;
    }
    &.pending {
      stroke: #E7D100;
    }
    &.unknown {
      stroke: #EEEEEE;
    }
  }
}

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