@mixin autosize-with-input {
  // HTML <div> with the following structure:
  // <div class="this-div">
  //   <span class="invisible-size-setter">Value value value</span>
  //   <input ... value="Value value value" />
  // </div>
  //
  // That is, the _contents_ of .invisible-size-setter and input are the
  // same. We set position=relative and input position absolute -- this
  // makes the input take the size of its contents.
  position: relative;
  white-space: nowrap;

  .invisible-size-setter {
    display: block;
    visibility: hidden;
    white-space: pre;

    &:empty::before {
      // Never let invisible-size-setter be empty: that will change the height
      // of the <span>, which will affect the height of the <input>
      content: '…';
      display: inline;
    }
  }

  input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font: inherit;
    line-height: inherit;
    color: inherit;
    background: inherit;
    border: 0;
    outline: 0;
  }
}

.tabs {
  // If you're editing these, consider editing paddings and widths in
  // _PaneSelect.scss.
  $tab-button-padding: 0.8rem 0.5rem 0.6rem 0;
  $tab-name-padding: 0.8rem 0.5rem 0.6rem 1.5rem;
  $tab-button-width: 3rem; // for an absolute-positioning hack
  $overlap-width: 3px;

  display: flex;
  overflow: hidden; // we're in a wider flexbox and must shrink to fit

  // We do some clever stuff with margin-left: -1px further down. Ensure the
  // first tab renders completely when its margin-left is -1px.
  padding-left: 1px;

  // list of tabs
  & > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: contents;

    // Single tab: ul > li > div.tab
    & > li {
      flex: 0 0 auto;
      max-width: 50vw; // so crazy-long tab names don't break the world
      display: inline-block;
      position: relative; // for .dropping-left and .dropping-right
      overflow: hidden; // shrink contents within flexbox

      .tab {
        display: flex;
        cursor: pointer;

        background: $pane-select-tab-bg;
        color: $pane-select-tab-fg;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;

        font-size: 1.4rem;
        line-height: 1.5; // 2.1rem

        .editable-tab-name {
          flex: 1 1 auto;
          @include autosize-with-input;
          max-width: 100%; // shrink unselected tabs

          &>* {
            padding: $tab-name-padding;
          }

          &:last-child {
            // When there's no dropdown, add right padding
            padding-right: 1rem;
          }

          input[name='tab-name'] {
            display: block;

            ::placeholder {
              color: white;
            }

            &:disabled {
              // Every unselected tab's input is :disabled. That lets the user
              // drag by the _parent_.
              pointer-events: none;
            }
          }
        }

        .dropdown {
          flex: 0 0 auto;
          height: 100%;

          button.toggle {
            cursor: pointer;
            border: 0;
            padding: 0;
            margin: $tab-button-padding;
            color: inherit;
            background: transparent; // override bootstrap
            height: 100%;
            opacity: 0.5;
            border-radius: 50%;
            font-size: rem(1);
            width: 2.1rem;
            height: 2.1rem;
            line-height: 1;

            svg {
              display: inline-block;
            }

            &:hover {
              opacity: 1;
            }

            &:focus {
              color: $brand-text--darker;
              background-color: $dark-accent--soft;
              opacity: 1;
            }
          }
        }
      }

      &:not(.selected) {
        flex: 0 1 auto; // too many tabs? Shrink unselected ones

        // flex-shrink doesn't _really_ do what we'd like. Ideally, we'd shrink
        // only the largest boxes. But _actually_, flex-shrink will shrink _all_
        // boxes in proportion with their length. One-char tab names shrink to
        // 0.5 chars. Prevent this problem with min-width.
        //
        // This increases the likelihood of "failure" -- meaning, tabs are too
        // wide to all fit on the screen. So we're improving a common case and
        // worsening a less-common case. [2020-01-11, adamhooper] I think this
        // is worth it; we can revisit later.
        min-width: 5.5rem;

        .tab {
          overflow: hidden; // too many tabs? Shrink unselected ones
          margin-right: 1px; // 1px more than when we're li.selected....
          margin-left: 0; // 1px more than when we're li.selected...

          .dropdown {
            // If the tab has been shrunk to fit, truncate its
            // <input name="tab-name"> text by drawing a gradient background
            // on top.
            //
            // See also .tab.dragging .tab .dropdown, for the same effect during drag-and-drop
            background: linear-gradient(
              90deg,
              rgba($pane-select-tab-bg, 0) 0%,
              $pane-select-tab-bg 30%
            );
          }
        }

        &.dragging .tab .dropdown {
          background: linear-gradient(
            90deg,
            rgba($brand-orange, 0) 0%,
            $brand-orange 30%
          );
        }
      }

      &.selected {
        // Nix margins -- we don't want 1px between the selected tab and the
        // next/previous ones. We also don't want tab to change width when the
        // user selects it.
        //
        // In sum: nix margins, and make tab wider by the same amount.
        .tab {
          background: $pane-select-selected-tab-bg;
          color: $pane-select-selected-tab-fg;
          margin-left: -1px; // instead of 0
          margin-right: 0; // instead of 1px
          padding-left: 1px;
          padding-right: 1px;

          ::placeholder {
            color: $brand-text--dark;
          }
        }
      }
    }
  }

  ul.dragging {
    $dragSpace: 2rem;

    li.dragging .tab {
      background: $brand-orange;
      will-change: transform; // https://bugs.chromium.org/p/chromium/issues/detail?id=916801
    }

    li.dropping-left::before,
    li.dropping-right::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: $brand-orange;
      width: 3px;
      pointer-events: none;
      z-index: 1;
    }

    li.dropping-left::before {
      left: 0px - $overlap-width;
    }

    li.dropping-right::before {
      right: -3px - (-$overlap-width);
    }
  }

  button.new-tab {
    margin-left: 0.8rem;
    flex: 0 0 auto;
    align-self: center;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1.6rem;
    line-height: 1;
    border: 0; // disable browser's native button display
    background: $pane-select-tab-bg;
    color: $pane-select-new-tab-button-fg;
    padding: 0;
    cursor: pointer;
    opacity: 0.8;

    &:hover {
      opacity: 1;
    }
  }
}
