$minTabHeight: 35px;
.yasgui {
  .tabsList {
    .sortable-placeholder {
      min-width: 100px;
      min-height: $minTabHeight;
      border: 2px dotted lighten(#555, 20);
    }
    display: flex;
    flex-wrap: wrap;
    a {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: $minTabHeight;
      border-bottom: 2px solid transparent;
      box-sizing: border-box;
    }
    .addTab {
      cursor: pointer;
      height: 100%;
      font-size: 120%;
      font-weight: 800;
      margin-left: 15px;
      padding: 0px 5px 2px 5px;
      background: inherit;
      border: none;
      color: #337ab7;

      &:hover,
      &:focus-visible {
        transform: scale(1.1);
      }
      &:focus {
        color: #faa857;
      }
    }
    .tab {
      position: relative;
      $activeColor: #337ab7;
      $hoverColor: lighten($activeColor, 30);

      .loader {
        display: none;
        background-color: lighten(#555, 50);
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 100%;
        animation-name: slide;
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
      }
      @keyframes slide {
        0% {
          left: 0;
          right: 100%;
        }
        70% {
          left: 0;
          right: 0;
        }
        100% {
          left: 100%;
          right: 0;
        }
      }
      &.active .loader {
        background-color: $hoverColor;
      }
      &:hover .loader {
        background-color: $activeColor;
      }
      &.querying .loader {
        display: block;
      }
      &.active a {
        border-bottom-color: $activeColor;
        color: #555;
      }
      input {
        display: none;
        outline: none;
        border: none;
      }
      &.renaming {
        span {
          display: none;
        }
        .closeTab {
          display: none;
        }
        input {
          display: block;
        }
      }
      a {
        font-weight: 600;
        color: lighten(#555, 20);
        font-size: 15px;
        line-height: 1.5rem;
        font-weight: 500;
        min-width: 120px;
        padding: 0px 24px 0px 30px;
        white-space: nowrap;
        overflow: hidden;
        &:hover {
          border-bottom-color: $hoverColor;
          color: #555;
        }
        &:focus {
          border-bottom-color: #faa857;
          color: #555;
        }
        .closeTab {
          color: #000;
          margin-left: 7px;
          font-size: 15px;
          text-shadow: 0 1px 0 #fff;
          opacity: 0.2;
          font-weight: 700;
          padding: 2px;
          &:hover {
            opacity: 0.5;
          }
        }
      }
    }
  }
}