$heading-height: 75px;

#editor-column {
  .locked {
    opacity: 0.8;
  }
}

.section.editor {
  flex: 1 50%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  background-color: var(--sn-stylekit-editor-background-color);
  color: var(--sn-stylekit-editor-foreground-color);
}

#error-decrypting-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 16px;
}

#error-decrypting-panel {
  max-width: 500px;
}

#editor-title-bar {
  width: 100%;

  padding-top: 14px;
  padding-left: 14px;
  padding-bottom: 10px;
  padding-right: 10px;

  border-bottom: none;
  z-index: $z-index-editor-title-bar;

  height: auto;
  overflow: visible;

  .title {
    font-size: var(--sn-stylekit-font-size-h1);
    font-weight: bold;
    padding-top: 0px;
    padding-right: 20px; /* make room for save status */

    > .input {
      float: left;
      text-overflow: ellipsis;
      width: 100%;
      font-weight: bold;
      border: none;
      outline: none;
      background-color: transparent;
      color: var(--sn-stylekit-editor-foreground-color);

      &:disabled {
        color: var(--sn-stylekit-editor-foreground-color);
      }
      &:focus {
        box-shadow: none;
      }
    }
  }

  #save-status {
    margin-right: 20px;
    font-size: calc(var(--sn-stylekit-base-font-size) - 2px);
    text-transform: none;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;

    .desc,
    .message:not(.warning):not(.danger) {
      // color: var(--sn-stylekit-editor-foreground-color);
      opacity: 0.35;
    }
  }

  .editor-tags {
    clear: left;
    width: 100%;
    overflow: visible;
    position: relative;
  }
}

.editor-content,
#editor-content {
  flex: 1;
  z-index: $z-index-editor-content;
  overflow-y: hidden;
  height: 100%;
  display: flex;
  tab-size: 2;
  background-color: var(--sn-stylekit-background-color);

  position: relative;

  #editor-iframe {
    flex: 1;
    width: 100%;
  }

  .editable {
    overflow-y: scroll;
    width: 100%;
    background-color: var(--sn-stylekit-editor-background-color);
    color: var(--sn-stylekit-editor-foreground-color);

    border: none;
    outline: none;
    padding: 15px;
    padding-top: 11px;
    font-size: var(--sn-stylekit-font-size-editor);
    resize: none;
  }
}

#editor-pane-component-stack {
  width: 100%;
  // To keep glued to bottom when editor is in loading state and not visible.
  margin-top: auto;

  // When two component stack items are expired and eat up full screen, this is required to scroll them.
  // overflow: auto;
  // When expired components, without this, requires scroll
  overflow: visible;

  #component-stack-menu-bar {
    border-bottom: none;
  }

  .component-stack-item {
    width: 100%;
    position: relative;

    iframe {
      width: 100%;
      background-color: var(--sn-stylekit-background-color);
      // we moved the border top from the .component-stack-item to the .iframe, as on parent,
      // it increases its height and caused unneccessary scrollbars on windows.
      border-top: 1px solid var(--sn-stylekit-border-color);
    }
  }
}

#note-text-editor:focus {
  box-shadow: none;
}