@import "client/common.scss";
@charset "UTF-8";

.dialog {
  .ftue-box.results {
    height: 268px !important;
    padding: 0;
    @include border_box_sizing;

    span.conditional {
      display:none;
    }
    &[data-type=automated] {
      span.conditional[data-type=automated] {
        display:inline;
      }
    }
    &[data-type=loopback] {
      span.conditional[data-type=loopback] {
        display:inline;
      }
    }
    &[data-type=adjust-gear-speed] {
      span.conditional[data-type=adjust-gear-speed] {
        display:inline;
      }
    }
    .io, .latency {
      display: none;
    }

    .spinner-small {
      display:none;
      margin:auto;
    }

    &[data-type="loopback"] .latency-score-section.starting {
      .spinner-small {
        display:block;
      }
    }
    .loopback-button-holder {
      width: 100%;
      text-align: center;
    }
    a.loopback-test {
      margin-top: 10px;
    }

    .unknown-text {
      display: none;
      padding: 8px;
    }

    .loopback-completed, .adjust-gear-speed-completed {
      display:none;
    }

    .scoring-section {
      font-size: 15px;
      @include border_box_sizing;
      height: 64px;

      &.good {
        background-color: #72a43b;
      }
      &.acceptable {
        background-color: #cc9900;
      }
      &.bad {
        background-color: #660000;
      }
      &.unknown, &.skip {
        background-color: #999;
      }
      &.skip {
        .io-skip-msg {
          display: inline;
        }
      }
    }

    .io-countdown {
      display: none;
      padding-left: 19px;
      position: relative;
      line-height:18px;
      .secs {
        position: absolute;
        width: 19px;
        left: 0;
      }

      .spinner-small {
        position:absolute;
        display:inline-block;
        vertical-align:middle;
        line-height:18px;
        margin-top:-7px;
        margin-left:5px;
      }
    }

    .io-skip-msg {
      display: none;
    }

    .io-rate {
      display: none;
    }
    .io-var {
      display: none;
    }

    ul.results-text {
      margin-left:-5px;
      padding: 10px 8px;

      li {
        display: none
      }

      span.io-failure {
        display:none;
      }

      %span.no-io-failure {
        display:inline;
      }

      &[latency-score="unknown"] {
        display: none;
      }
      &[latency-score="good"] li.latency-good {
        display: list-item;
      }
      &[latency-score="acceptable"] li.latency-acceptable {
        display: list-item;
      }
      &[latency-score="bad"] li.latency-bad {
        display: list-item;
      }
      &[io-var-score="good"] li.io-var-good {
        display: list-item;
      }
      &[io-var-score="acceptable"] li.io-var-acceptable {
        display: list-item;
      }
      &[io-var-score="bad"] li.io-var-bad {
        display: list-item;
      }
      &[io-rate-score="good"] li.io-rate-good {
        display: list-item;
      }
      &[io-rate-score="acceptable"] li.io-rate-acceptable {
        display: list-item;
      }
      &[io-rate-score="bad"] li.io-rate-bad {
        display: list-item;
      }
      &[scored="complete"] {
        li.success {
          display: list-item;
        }

        &[io-rate-score="bad"], &[io-var-score="bad"], &[latency-score="bad"] {
          li.success {
            display: none;
          }
          li.failure {
            display: list-item;
          }
        }

        &[io-rate-score="bad"], &[io-var-score="bad"] {
          span.io-failure {
            display:inline;
          }

          span.no-io-failure {
            display:none;
          }
        }

        &[latency-score="unknown"] {
          li.success {
            display: none;
          }
        }
      }
    }
  }
}