.editor-column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: hidden;
  background-color: var(--enas-editor-col-background-color);
  color: var(--enas-foreground-primary-color);
  height: 100%;

  .title-bar {
    width: 100%;
    z-index: var(--enas-z-index-editor-title-bar);
    padding: var(--enas-note-editor-padding);
    height: var(--enas-editor-title-bar-height);

    .box {
      justify-content: space-between;
      align-items: flex-start;
      display: flex;
      gap: 0.5rem;

      .left {
        align-items: center;
        flex-grow: 1;
        display: flex;

        .title {
          font-size: var(--enas-font-size-h1);
          font-weight: bold;
          padding-top: 0px;
          padding-right: 20px;
          overflow: auto;
          flex-grow: 1;

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

            &:disabled {
              color: var(--enas-foreground-primary-color);
            }

            &:focus {
              box-shadow: none;
            }
          }
        }
      }

      .right {
        align-items: center;
        display: flex;
      }
    }
  }


  .editor-box {
    margin: var(--enas-note-editor-margin);
    padding: var(--enas-note-editor-padding);
    border: 1px solid var(--enas-border-color);
  }

  .note {
    height: calc(100vh - var(--enas-editor-title-bar-height) - var(--enas-desktop-title-bar-height) - var(--enas-note-editor-padding)*2);
    overflow-y: scroll;
  }
}