// General styleguide
////////////////////////////////////////////////////////////////////////////
@nav-sidebar-width: 220px;

.scribe {
  .borderBox();
  background-color: darken(#585858, 5%);
  height: 100%;
  width: 100%;
  font-family: @mainFont;
  position: relative;
  padding-left: @nav-sidebar-width;
  padding-top: @header-upper-height + @circuit-header-lower-height;
  color: @white;
  .main-container {
    .borderBox();
    background-color: darken(#585858, 5%);
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    padding-top: @header-upper-height + @circuit-header-lower-height + 20;
    padding-right: 15px;
    padding-bottom: 55px;
    padding-left: @nav-sidebar-width + 20;

    &.sidebar-hidden {
      padding-left: 20px;
      .nav-sidebar {
        left: -@nav-sidebar-width;
      }
    }

    h1 {
      position: absolute;
      left: @nav-sidebar-width + 20;
      top: @header-upper-height + @circuit-header-lower-height + 5;
      color: @white;
      font-size: 22px;
      height: 40px;
      line-height: 42px;
      vertical-align: middle;
      color: @white;
      padding-right: 300px;
    }

    .scribe-content {
      .borderBox();
      .borderRadius(5px);
      position: relative;
      height: 100%;
      width: 100%;
      color: darken(@white, 15%);


      .scribe-header {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid @trueBlack;
        h2 {
          text-align: center;
          margin-bottom: 0px;
          padding-top: 0px;
        }
        p {
          margin-bottom: 0px;
        }
      }
      .scribe-inner {
        position: relative;
        padding-top: 20px;
        padding-bottom: 20px;
      }

      .type-icon {
        .typeIconWithText(lighten(@dashboardMedGreen, 5%));
      }

      //The 'results' popup
      .scribe-header.preview-results-header {
        background-color: @black;
        padding-left: 10px;
        padding-right: 10px;
      }
      .preview-results {
        .borderBox();
        .borderRadius(5px);
        background-color: lighten(@black, 3%);
        border: 1px solid @trueBlack;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: auto;
        .borderBox();
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: lighten(@black, 3%);
        top: 0px;
        left: 0px;
        z-index: 100;
        .dismiss-results {
          .transition(all 250ms);
          font-size: 15px;
          cursor: pointer;
          position: absolute;
          left: 20px;
          top: 14px;
          height: 20px;
          // width: 35px;
          line-height: 20px;
          text-align: center;
          vertical-align: middle;
          color: @dashboardMedGreen;
          >i {
            margin-right: 3px;
          }
          &:hover {
            color: darken(@dashboardMedGreen, 5%);
          }
        }
        .scribe-inner {
          padding-left: 20px;
          padding-right: 20px;
        }
        .result-content {
          .outcome {
            margin-bottom: 0px;
            strong {
              color: @dashboardMedGreen;
            }
          }
          .duration {
            color: @medGray;
            margin-bottom: 10px;
          }
          .type-icon {
            margin-top: 5px;
            margin-bottom: 10px;
          }
          .returns {
            position: relative;
            pre {
              margin-bottom: 35px;
            }
          }
          .test-label {
            .borderBox();
            padding-top: 35px;
            border-top: 3px solid rgba(255,255,255,0.1);
            margin-bottom: 5px;
            padding-right: 125px;
          }
          p {
            margin-bottom: 5px;
            color: @medGray;
          }
        }
      }

      .intro, .empty-message {
        .borderRadius(7px);
        padding: 25px;
        background-color: @black;
        border: 1px solid @trueBlack;
        margin-bottom: 25px;
        span {
          color: @brightTurquoise;
        }
      }
      .empty-message {
        text-align: center;
      }

      .help-text {
        .borderBox();
        .borderRadius(5px);
        background-color: rgba(255,255,255,0.2);
        padding: 10px;
        margin: 10px 0;
      }
      h2 {
        font-size: 22px;
        // color: @brightTurquoise;
        margin-bottom: 20px;
        padding-top: 15px;
      }
      h3 {
        padding-top: 15px;
        font-size: 24px;
        color: @medGray;
        margin-bottom: 15px;
      }
      h4 {
        font-size: 20px;
        padding-top: 10px;
        margin-bottom: 10px;
      }
      h5 {
        font-size: 18px;
        margin-bottom: 10px;
        padding-top: 10px;
      }
      p {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 22px;
        a {
          text-decoration: underline;
        }
      }
      a {
        .transition(all 250ms);
        color: @medGreen;
        &:hover {
          color: darken(@medGreen, 10%);
        }
      }
      code {
        font-size: 13px;
        background: @medGray;
      }
      pre {
        background: @trueBlack;
        padding: 15px;
        .borderRadius(4px);
        code {
          background: transparent;
        }
      }
      blockquote {
        .borderRadius(4px);
        background: #e6e6e6;
        padding: 14px;
        margin: 0px 0px 22px;
        p {
          color: #222222;
          &:last-child {
            margin-bottom: 0px;
          }
        }
      }

      .dismiss-button {
        .medRectangularButton(@medBlue);
      }

      .reload-button {
        position: absolute;
        top: 7px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 14px;
        line-height: 32px;
        vertical-align: middle;
        font-family: @mainFont;
        color: @medGray;
        >i {
          margin-left: 5px;
        }
        // &.success {
        //   color: @dashboardMedGreen;
        // }
        &.failed {
          color: @medRed;
        }
        // &.warning {
        //   color: @medYellow;
        // }
      }


      // Form styles
      form {
        .clearfix();
      }
      .form-section {
        .borderBox();
        padding-top: 25px;
        padding-bottom: 25px;
        max-width: 800px;
        // border-top: 1px solid rgba(0,0,0,0.1);
        // width: 50%;
        // float: left;
        // &:nth-child(odd) {
        //   padding-right: 15px;
        // }
        // &:nth-child(even) {
        //   padding-left: 15px;
        // }
        // &:first-child, &:nth-child(2) {
        //   padding-top: 0px;
        //   border-top: none;
        // }
        &:first-child {
          padding-top: 0px;
          border-top: none;
        }
        // Submit button row
        &.submit-section {
          .clearfix();
          width: 100%;
          float: none;
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 0;
          padding-right: 0;
          clear: both;
        }

        // custom-dropdown, input {
        //   min-width: 300px;
        //   width: 50%;
        //   display: inline-block;
        //   clear: both;
        // }
        input {
          .inputDk();
          width: 100%;
        }
        textarea {
          .inputDk();
          height: 100px;
          width: 100%;
        }
        label {
          font-size: 15px;
          display: block;
          margin-bottom: 7px;
          color: @white;
          .type-icon {
            margin-left: 5px;
            top: -3px;
          }
        }
        &.optional {
          label {
            opacity: 0.8;
          }
        }
      }
    }

    .submit-button {
      .medRectangularButton(@dashboardMedGreen);
      margin-bottom: 20px;
      // float: right;
      min-width: 100px;
      &.failed {
        .medRectangularButton(@medRed);
      }
      &[data-purpose="saveAsTest"] {
        margin-top: 10px;
        &.abs-right {
          position: absolute;
          right: 20px;
          bottom: 0px;
        }
      }
    }


    .scribe-footer {
      .borderBox();
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      padding: 10px 0;
      font-size: 12px;
      background-color: rgba(0,0,0,0.8);
      border-top: 1px solid @trueBlack;
      text-align: center;
      span {
        color: @brightTurquoise;
      }
      .dismiss-footer-button {
        .smRectangularButton(@brightTurquoise);
      }
    }

    .nav-sidebar {
      .borderBox();
      color: @white;
      background-color: lighten(@black, 3%);
      border-right: 1px solid @trueBlack;
      padding-top: @header-upper-height + @circuit-header-lower-height;
      width: @nav-sidebar-width;
      min-height: 100%;
      position: fixed;
      left: 0px;
      top: 0px;
      overflow-y: auto;
      h3 {
        .borderBox();
        height: 40px;
        line-height: 39px;
        vertical-align: middle;
        border-bottom: 1px solid @trueBlack;
        // color: @brightTurquoise;
        color: lighten(@dashboardMedGreen, 5%);
        font-size: 15px;
        padding: 0px 20px;
      }
      .nav-icon {
        .squareIcon(lighten(@dashboardMedGreen, 5%));
        position: relative;
        top: 5px;
        margin-right: 7px;
      }
      ul.nav {
        .borderBox();
        padding-left: 10px;
        .nav-item {
          .borderBox();
          // margin-bottom: 15px;
          font-size: 13px;
          height: 26px;
          display: block;
          color: @white;
          padding-left: 18px;
          .text {
            .transition(all 250ms);
            line-height: 26px;
            vertical-align: middle;
          }
          &:hover {
            .text {
              color: @dashboardMedGreen;
            }
          }
          &.current {
            >a {
              color: @dashboardMedGreen;
              border-right: 3px solid @dashboardMedGreen;
              .nav-icon {
                border: 2px solid @dashboardMedGreen;
                &.default-icon {
                  background: url('/images/icon_treeline_green.png') no-repeat 3px center;
                  background-size: 11px;
                }
              }
            }
          }
        }
      }
    }
  }
}

em {
  font-weight: normal;
}

// Ace editor containers:
.ace-editor-container {
  position: relative;
  overflow: auto;
  height: 250px;
}

.run-btn {
  .running {
    opacity: 0.5;
  }
}

.save-test-btn {
  .busy {
    opacity: 0.5;
  }
}