Custom tab style for Atom's zen package

style.less

@import "ui-variables";
@import "syntax-variables";

// Make zen tabs more zen-like
[data-zen="true"] {
  atom-pane-container atom-pane .item-views {
    background: @syntax-background-color !important;
  }
  atom-text-editor:not(.mini) {
    margin: 0 auto;
    max-width: 100%;
  }
  atom-workspace {
    padding: 0;
  }
  atom-workspace atom-panel-container.left:empty {
    padding: 0;
  }

  .tab-bar {
    display: none;
  }
  .wrap-guide {
    visibility: hidden;
  }
  .status-bar {
    height: 0;
  }

  ::shadow {
    .gutter {
      display: none;
    }
    .editor--private {
      .vertical-scrollbar {
        opacity: 0;
        transition: opacity .2s .1s;
      }
      &:hover .vertical-scrollbar {
        opacity: 1;
      }
    }
  }

  &[data-zen-tabs="multiple"], &[data-zen-tabs="single"] {
    .tab-bar {
      display: flex;
      justify-content: center;
      background: @syntax-background-color;
      box-shadow: none;
      &:after {
        display: none;
      }
      .tab {
        display: block;
        box-shadow: none;
        &, &:before, &:after {
          background-image: none;
          box-shadow: none;
        }
        .close-icon {
          display: none;
        }
        .title {
          text-align: center;
        }
      }
    }
  }

  &[data-zen-tabs="multiple"] {
    .tab-bar {
      .tab {
        opacity: .20;
      }
      .active {
        display: block;
        text-align: center;
        width: 100%;
        opacity: 0.85;
      }
    }
  }

  &[data-zen-tabs="single"] {
    .tab-bar {
      .tab {
        display: none;
      }
      .active {
        display: block;
        text-align: center;
        width: 100%;
        opacity: 0.85;
      }
    }
  }
}