.c-layout-editor {

  // When we are not editing, the middle pane and/or left pane take up the entire
  // width, which pushes the gutter before the right pane onto the next line.
  // In this case we need to make that gutter zero height so it doesn't create empty
  // space below our content.
  //
  // This takes a bit of black magic:
  //  1. When we have a left pane, this will be the second gutter. When there is
  //    no left pane it will be the first gutter.
  //
  //  2. The >>> operator (previously /deep/) is used to create style rules that
  //    apply to elements inside of child components.
  //
  //        #my-triple-pane.c-not-editing-layout[0x277261] .gutter
  //        See https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
  //
  //  3. There is no CSS selector to find the second element that matches a
  //    class selector, but you can select the siblings of the first element
  //    using ~. So we set a rule for all .gutter elements, and then override
  //    the rule for all but the first. This works fine because there are only
  //    two. See
  //
  //        https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
  //
  &.c-not-editing-layout {

    // Not editing, have a left pane
    &.c-has-left-pane {


      & >>> .gutter-horizontal {
        height: 100%;
      }

      // Siblings of first
      & >>> .gutter-horizontal ~ .gutter-horizontal {
        height: 0px;
      }
    }

    // Not editing, no a left pane
    &.c-no-left-pane {
      & >>> .gutter-horizontal {
        height: 0px;
      }
    }
  }


  //
  //  Look after the left pane, if there is one.
  //
  .c-left-pane {
    padding: 0px !important;
  }



  //
  //  Look after the middle pane.
  //
  &.c-editing-layout {

    .c-middle-pane {
      position: relative;
      padding: 0px !important;
      //overflow-y: hidden;
      overflow-x: scroll;
    }

    .c-editbar {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 2000; // Everything on page must be below this.

      display: block;
      width: 100%;
      //- position: absolute;
      top: 0px;
      left: 0px;
      height: $c-editbar-height;
      background-color: $c-editbar-color;
      padding: 1px;
      margin: 0px;

      border: none;
      border-bottom: solid 2px white;
      cursor: pointer;
      font-family: arial;
      font-size: 12px;

      text-align: center;


      .c-editbar-contentId {
        position: absolute;
        left: 15px;
        color: white;
        font-weight: 800;
        font-size: 11px;
      }

      .c-editbar-mode-label {
        display: table;
        color: $c-editbar-color;
        height: $c-editbar-height;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 2px;
        margin: 0 auto;
        background-color: white;
      }

      .c-selected-mode-style {
        color: blue;
        font-weight: 800;
      }
      .c-not-selected-mode-style {
      }
      .c-editbar-mode-label:hover {
        color: green;
      }

      .c-editbar-right {
        position: absolute;
        right: 15px;
        color: white;
        font-weight: 800;
        font-size: 11px;
      }

      .c-editbar-dump-button {
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 0px;
        a, a:visited, a:hover {
          color: white;
          font-size: 9px;
        }
      }
    }//- c-editbar


    .c-middle-pane-content {
      margin-top: calc(#{$c-editbar-height} + 2px);
      padding: 0px;
    }
  }//- .c-editing-layout


  /*
   *  The right pane
   */
  .c-right-pane {
    padding: 0px !important;

    .c-properties-pane {
      h1.title {
        font-size: 24px;
      }
      padding: 0px !important;
      margin: 0px;

      // background-color: #fafafa;
      .title {
        border-top: solid 4px #dd0038;
        //color: #dd0038;
        padding-top: 2px;
        background-color: #ffffff;
        padding-bottom: 2px;
        //border-bottom: solid 1px #dd0038;
        border-bottom: solid 1px $tt-property-header-outline;
        margin-bottom: 2px;
      }
    }

    // Components (toolbox) pane
    .c-components-pane {
      h1.title {
        font-size: 24px;
      }
      padding: 0px !important;
      margin: 0px;
      //background-color: #f7f7f7;
      .title {
        border-top: solid 4px #dd0038;
        //color: #dd0038;
        padding-top: 2px;
        background-color: #ffffff;
        padding-bottom: 2px;
        //border-bottom: solid 1px #dd0038;
        //border-bottom: solid 1px $tt-property-header-outline;
        margin-bottom: 2px;
      }
    }

  }
}

.c-content-layout-props {

  .my-buttons {
    position: absolute;
    right: 3px;
    cursor: pointer;
    font-size: 10px;
  }
}