.param-string .ace-wrapper-outer {
  .help {
    font-size: 1.3rem;
    color: $dark-gray;

    kbd {
      background-color: $dark-accent--soft;
      color: $brand-text--dark;
    }

    a {
      color: $brand-workspace;
    }
  }

  .ace-aspect-ratio-container {
    margin-top: 1.6rem;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; // square

    & > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #code-editor {
      border-radius: 0.3rem;
      background-color: $Vlight-gray;

      .ace_content {
        padding: 0.5rem;

        .ace_layer {
          left: 0;
        }

        .ace_layer.ace_cursor-layer {
          // cursor
          .ace_cursor {
            color: $brand-workspace;
          }
          &.ace_hidden-cursors {
            opacity: 0;
          }
        }

        .ace_layer.ace_marker-layer {
          .ace_active-line {
            background-color: $dark-accent--soft;
          }
        }
      }

      //Gutter is only visible in zen mode
      .ace_layer.ace_gutter-layer {
        padding-top: 0.5rem;
      }

      .ace_gutter-active-line {
        margin-top: 0.5rem;
      }
    }

    .ace-tomorrow .ace_gutter {
      background: $heading-bg !important;
      color: #fff !important;
    }

    .ace-tomorrow .ace_gutter-active-line {
      background-color: #fff !important;
      opacity: 1 !important;
    }
  }
}
