@import "bootstrap/less/variables.less";
@import "octicon-mixins.less";

@close-icon-size: 11px;

.tabs {
  display: -webkit-flex;
  -webkit-user-select: none;
  margin: 0;

  .tab {
    line-height: 30px;
    font-size: 11px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px + @close-icon-size + 2px;
    -webkit-user-drag: element;
    -webkit-flex: 1;
    max-width: 175px;
    min-width: 40px;

    &.active {
      -webkit-flex: 2;
    }

    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .close-icon {
      .mini-icon(x, @close-icon-size);
      position: absolute;
      top: 0;
      right: 10px;
      cursor: pointer;
    }

    &.modified:hover .close-icon {
      color: #66a6ff;
    }

    &.modified:not(:hover) .close-icon {
      &:before { content: "" }
      top: 11px;
      right: 11px;
      width: 8px;
      height: 8px;
      border: 2px solid #66a6ff;
      border-radius: 12px;
    }
  }
}

/* Drag and Drop */

.tab.is-drop-target:before, .tab.drop-target-is-after:after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 999;
  display: inline-block;
  width: 2px;
  height: 30px;
  display: inline-block;
  background: #0098ff;
}

.tab.is-drop-target:after, .tab.drop-target-is-after:before {
  content: "";
  position: absolute;
  top: 30px;
  z-index: 9999;
  width: 4px;
  height: 4px;
  background: #0098ff;
  border-radius: 4px;
  border: 1px solid transparent;
}

.tab.is-drop-target:before {
  left: -2px;
}

.tab.is-drop-target:after {
  left: -4px;
}

.tab.drop-target-is-after:before {
  right: -4px;
}

.tab.drop-target-is-after:after {
  right: -2px;
}
