@import "ui-variables";

// Custom Title Bar -------------------------------

@title-bar-text-size: 13px;
@title-bar-height: 23px;
@title-bar-background-color: @base-background-color;
@title-bar-border-color: @base-border-color;

body.fullscreen .title-bar {
  margin-top: -@title-bar-height;
}

.title-bar {
  box-sizing: content-box;
  height: @title-bar-height;
  transition: margin-top 160ms;

  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: @title-bar-text-size;
  -webkit-user-select: none;
  -webkit-app-region: drag;

  padding: 0 70px;
  overflow: hidden;

  .title {
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  background-color: @title-bar-background-color;
  border-bottom: 1px solid @title-bar-border-color;

  .is-blurred & {
    color: @text-color-subtle;
  }
}


// Hidden Title Bar -------------------------------

.hidden-title-bar {

  // Add space for the traffic lights
  atom-panel-container.left {
    padding-top: 36px;
    transition: padding-top 160ms;
  }
  &.fullscreen atom-panel-container.left {
    padding-top: 0;
  }

  // Avoid tabs from overlap window controls when sidebar is closed
  atom-panel-container.left:empty + atom-workspace-axis.vertical .tab-bar,
  atom-panel-container.left:empty + atom-workspace-axis.vertical atom-panel-container.top {
    padding-left: 77px;
  }

  // Enable dragging
  atom-panel-container.left,
  .tree-view,
  .tab-bar,
  .status-bar {
    -webkit-app-region: drag;
  }

  // Disable dragging (on child elements)
  .tree-view > li,
  .tree-view-resize-handle,
  .tab {
    -webkit-app-region: no-drag;
  }

  // Modal
  atom-panel.modal {
    // padding: 0 77px;
    top: 36px;
    border-top-left-radius: @component-border-radius;
    border-top-right-radius: @component-border-radius;
  }

}