@tab-border-size: 1px;
@tab-border: @tab-border-size solid @tab-border-color;
@tab-max-width: @ui-size*15;
@tab-min-width: @ui-size*5;
@tab-padding: @ui-padding/2;
@modified-icon-width: @ui-size*1.5;

.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;

  &::-webkit-scrollbar {
    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 ----------------------

    &::after {
      content: "";
      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-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;
    }
    &[data-type="TextEditor"]::after {
      background-color: @tab-background-color-editor;
      border-bottom-color: @tab-background-color-editor;
    }
    &.active::after {
      opacity: 1;
      transition: none;
    }


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

    .title {
      position: relative;
      z-index: 1;
      text-align: center;
    }


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

    .close-icon {
      top: 0;
      right: 0;
      z-index: 1;
      margin-right: @tab-padding*1.2;
      height: @ui-tab-height;
      line-height: @ui-tab-height;
      text-align: center;
      color: @tab-icon-color;
      transform: scale(0);
      transition: transform .08s;
      &:hover {
        color: @tab-text-color-active;
      }
      &:active {
        opacity: .3;
      }
      &::before {
        font-size: inherit;
      }
    }
    &:hover .close-icon,
    &.active .close-icon {
      transform: scale(1);
      transition-duration: .16s;
    }
  }


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

  .tab {
    flex: 1;
    &.active {
      flex: 1 0 auto;
    }
  }


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

  .tab,
  .tab.active {
    padding-right: @modified-icon-width;
    .title {
      padding: 0 @tab-padding;
    }
  }


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

  .tab.active {
    color: @tab-text-color-active;
    &[data-type="TextEditor"] {
      color: @tab-text-color-editor;
    }
  }


  // Modified ----------------------
  .tab.modified {
    .close-icon {
      color: @text-color-info;
      border: none;
      border-bottom: @tab-border-size solid transparent;
    }
    &:not(:hover) .close-icon {
      right: 0;
      top: 0;
      width: initial;
      height: @ui-tab-height;
      border: none;
      border-bottom: @tab-border-size solid transparent;
      border-radius: 0;
      transform: scale(1);
      &::before {
        content: "\f052";
        display: inline-block;
        color: inherit;
      }
    }

    &:hover .close-icon:hover {
      color: @text-color-highlight;
    }
  }


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

  .tab.is-dragging {
    .close-icon,
    &:before {
      visibility: hidden;
    }
    &::after {
      background: darken(@tab-background-color, 6%);
      border-color: transparent;
      opacity: .5;
    }
  }

  .placeholder {
    margin: 0;
    height: @ui-tab-height;
    background: @base-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 @base-accent-color;
      background: transparent;
    }

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

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


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

.tab-bar .tab::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  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: @base-accent-color;
  opacity: 0;
  transform: scaleY(0);
  transition: opacity .16s, transform .16s cubic-bezier(.80, 0, .90, .53);

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

atom-pane.active .tab.active:before {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity .16s, transform .32s cubic-bezier(0,.6,.2,1);
}
