.editors-pane {
  flex: 1;
  position: relative;
  min-height: 100vh;

  .editors-tabs {
    display: flex;
    flex-direction: row;
    margin-left: 38px;

    .editor-tab {
      cursor: pointer;
      padding: 2px 0.5rem 2px 0.5rem;
      border-radius: 4px 4px 0 0;
      border-top: 1px solid #ddd;
      border-right: 1px solid #ddd;
      font-size: smaller;
      background: #f9f9f9;

      html.dark & {
        background: rgba(55, 65, 81, var(--tw-bg-opacity));
      }

      svg, i {
        display: inline;
        font-size: 70%;
        margin-left: 0.4rem;
        color: black;
      }
      svg, i:before {
        content: "\f00d";
      }

      &:first-child {
        border-left: 1px solid #ddd;
      }

      &.editor-tab--active {
        background: #fff;

        html.dark & {
          background: #0a001f;
        }
      }

      &.editor-tab--dirty {
        font-weight: bold;
        svg, i {
          font-size: 80%;
        }
      }

      &:hover {
        svg, i {
          color: black;
          font-size: 70%;
        }
        svg, i:before {
          content: "\f00d";
        }
      }

      .name {
        background-repeat: no-repeat;
        background-position: 0px 50%;
        padding-left: 22px;
        line-height: 18px;
        height: 18px;
      }

      @mixin file-icons;
    }
  }
  .editors-contents {
    .editor-content {
      display: none;

      &.editor-content--active {
        display: block;
      }
    }
  }
}