@tab-border-size: 1px;
@tab-border: @tab-border-size solid @tab-border-color;
@tab-max-width: @ui-size*22;
@tab-min-width: @ui-size*7; // icon + 5 characters
@tab-padding: @ui-padding/1.5;
@modified-icon-width: @ui-size;

.tab-bar {
  height: @ui-tab-height;
  box-shadow: inset 0 -1px 0 @tab-border-color;
  background: @tab-bar-background-color;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0;

  &::-webkit-scrollbar {
    display: none;
  }

  &:empty {
    display: none;
  }


  // Tab ----------------------

  .tab {
    position: relative;
    top: 0;
    max-width: @tab-max-width;
    min-width: @tab-min-width;
    height: @ui-tab-height;
    font-size: inherit;
    color: @tab-text-color;
    line-height: @ui-tab-height;
    padding: 0;
    margin: 0;
    background-clip: content-box;
    &.active {
      border-radius: @component-border-radius*1.75 @component-border-radius*1.75 0 0;
      background-color: @tab-background-color-active;
    }

    // Cover ----------------------

    &::after {
      content: "";
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: inherit;
      border-radius: @component-border-radius @component-border-radius 0 0;
      border: @tab-border;
      border-bottom-color: @tab-background-color-active;
      background-image: linear-gradient( hsla(0,0%,100,.02), hsla(0,0%,100,0) );
      background-clip: content-box;
      box-shadow: inset 0 1px 1px hsla(0,0%,100,.06);
      transition: opacity .16s;
      opacity: 0;
    }
    &.active::after {
      opacity: 1;
      transition: none;
    }


    // Title ----------------------

    .title {
      position: relative;
      height: inherit;
      text-align: center;
      margin: 0 @tab-padding;
      border-bottom: @tab-border-size solid transparent;
      text-overflow: clip;
      // To use a mask and keep sub-pixel AA: Also add an opaque bg + HWA layer
      -webkit-mask: linear-gradient( to left, hsla(0,0%,0%,0), hsla(0,0%,0%,1) 1em) no-repeat;
      background-color: @tab-background-color;
      background-clip: content-box;
      backface-visibility: hidden;
    }
    &:hover .title {
      -webkit-mask-position: -@modified-icon-width 0;
    }
    &.active .title {
      background-color: @tab-background-color-active;
    }


    // Close icon ----------------------

    .close-icon {
      top: .77em; // shoule be .75em but that messes up the pixel snapping
      right: .77em;
      z-index: 2;
      font-size: 1em;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      border-radius: @component-border-radius;
      overflow: hidden;
      transform: scale(0);
      transition: transform .08s;
      &:hover {
        color: @accent-text-color;
        background-color: @accent-color;
      }
      &:active {
        background-color: fade(@accent-color, 50%);
      }
      &::before {
        content: "\f05d"; // plus icon has a smaller weight
        position: absolute;
        font-size: 4em; // blow it up
        width: 1.5em; // same as parent
        height: 1.5em; // same as parent
        line-height: 1.5; // same as parent
        text-align: center;
        transform: translate(-37.5%, -37.5%) // center: - (1.5 / 4)
                   rotate(45deg) // rotate (since it's the "+" icon)
                   scale(.33)  ; // scale it down again
        pointer-events: none;
      }
    }
    &:hover .close-icon {
      transform: scale(1);
      transition-duration: .16s;
    }
  }


  // Tab sizing ----------------------

  .tab,
  .tab.active {
    flex: 1;
  }


  // keep tabs same size when active ----------------------

  .tab,
  .tab.active {
    padding-right: 0;
    .title {
      padding: 0;
    }
  }


  // Active ----------------------

  .tab.active {
    color: @tab-text-color-active;
  }

  // Tab seperator ----------------------

  .tab {
    border-width: 0 0 0 1px;
    border-image: linear-gradient(@tab-bar-background-color, @base-border-color 1em) 0 0 0 1 stretch;
    &:first-child {
      border-width: 0;
    }
  }
  .tab.active,
  .tab.active + .tab {
    border-image: linear-gradient(transparent, transparent) 0 0 0 1 stretch;
  }


  // Modified ----------------------
  .tab.modified {
    &:hover .close-icon {
      color: @accent-color;
      &:hover {
        color: @accent-bg-text-color;
      }
    }
    &:not(:hover) .close-icon {
      top: .75em;
      right: .75em;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5;
      color: @accent-color;
      border: none;
      transform: scale(1);
      &::before {
        content: "\f052";
        display: inline-block;
        font-size: inherit;
        transform: scale(1);
      }
    }
  }


  // Dragging ----------------------

  .tab.is-dragging {
    opacity: .5;
    .close-icon,
    &:before {
      visibility: hidden;
    }
  }

  .placeholder {
    margin: 0;
    height: @ui-tab-height;
    background: @accent-color;
    pointer-events: none;
    &:after {
      top: @ui-tab-height/2;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 0;
      border-radius: 0;
      border: 5px solid;
      border-color: transparent transparent transparent @accent-color;
      background: transparent;
    }

    &:last-child {
      margin-left: -2px;

      &:after {
        margin-left: -10px;
        border-color: transparent @accent-color transparent transparent;
      }
    }
  }
}


// Active pane marker --------------

.tab-bar .tab::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  top: @tab-border-size;
  left: @tab-border-size;
  bottom: @tab-border-size;
  width: 2px;
  border-top-left-radius: inherit;
  border-radius: @component-border-radius 0;
  background: @accent-color;
  opacity: 0;
  transition: opacity .16s;

  .theme-one-light-ui & {
    left: 0;
  }
}

atom-pane.active .tab.active:before {
  opacity: 1;
  transition-duration: .32s;
}


// Custom tabs --------------

.tab-bar .tab.active {
  &[data-type$="Editor"],
  &[data-type="MarkdownPreviewView"] {
    color: @tab-text-color-editor;
    background-color: @tab-background-color-editor;
    &::after {
      border-bottom-color: @tab-background-color-editor;
    }
    .title {
      background-color: @tab-background-color-editor;
    }
  }
}
