.editor{
  position:relative;
  .svg-target{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  padding: 32px;
  background-color: #ffffff;
  .editor-controls{
    position:relative;
    z-index:10;
    margin:auto;
    max-width:600px;
    background-color: #ffffff;
    border:1px solid #ffffff;
  }
  .description{
    padding:16px;
  }
  .image-title {
    font-weight: 300;
    font-size: 24px;
    margin: 4px 0;
  }
  .show-more{
    cursor:pointer;
    position:absolute;
    right:16px;
    top:16px;
  }
  .image-description {
    display:none;
    opacity:0;
    transition: .2s opacity ease-in;
    .by, .github-source{
      font-weight:300;
      font-size:14px;
      margin-right: 24px;
    }
    .author{
      font-weight: 400;
      font-size:15px;
      color: $gray-3;
      text-decoration: none;
    }
    &.visible{
      display:block;
      opacity: 1;
    }
  }
}
.tab-bar{
  max-width: 600px;
  margin:auto;
  .tab{
    border:1px solid $gray;
    padding:1em 0;
    font-size:14px;
    cursor:pointer;
    box-sizing: border-box;
    text-align:center;
    &.active {
      background-color: $gray;
    }
  }
}
.param-control{
  label{
    display:block;
    font-size: 18px;
    font-weight: 300;
    color: $gray-3;
    margin: 16px 0 8px;
  }
  .input-control{
    position:relative;
    input{
      display:inline-block;
      width:106px;
      height:34px;
      box-sizing:border-box;
      height:34px;
      border: 1px solid $gray-2;
    }
    .slider{
      height:8px;
      border-radius: 4px;
      background: $gray-3;
      position: absolute;
      left: 116px;
      right: 0;
      top: 12px;
      .ui-slider-handle{
        width: 1em;
        height: 1em;
        border-radius: 1em;
        background: $gray-2;
        border: 1px solid #ffffff;
      }
    }
  }
  /** Spectrum color picker */
  .sp-replacer{
    position: absolute;
    left: 106px;
    right: 0;
    top: 0;
    padding:0;
    height:34px;
    border: 1px solid #ccc;
    border-left: none;
    box-sizing:border-box;
    .sp-preview{
      width:100%;
      height:100%;
      border: none;
    }
  }
}

.source-tab{
  #ace-editor{
    width: 100%;
    height:400px;
  }
  .output{
    pre {
      font-size:12px;
    }
  }
}

.inner-tab{
  padding:1em;
  background-color: $gray;
}