.focus-mode {
  .mac-desktop #editor-column {
    // To offset colored circles in Mac
    padding-top: 35px;
  }

  .mac-desktop #editor-column:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 38px;
    -webkit-app-region: drag;
  }

  #editor-title-bar {
    display: none;
  }

  #editor-menu-bar {
    display: none;
  }

  #editor-pane-component-stack {
    display: none;
  }

  #footer-bar {
    opacity: 0.08;
    transition: opacity 0.25s;
  }

  #footer-bar:hover {
    opacity: 1;
  }

  #navigation,
  #notes-column {
    will-change: opacity;
    animation: fade-out 1.25s forwards;
    transition: width 1.25s;
    transition-delay: 0s;
    width: 0px !important;
    flex: none !important;
  }

  #navigation:hover {
    flex: initial;
    width: 0px !important;
  }

  #notes-column:hover {
    flex: initial;
    width: 0px !important;
  }
}

.disable-focus-mode {
  #navigation,
  #notes-column {
    transition: width 1.25s;
    will-change: opacity;
    animation: fade-in 1.25s forwards;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    border: none !important;
  }
}