.tab-bar {

  &-item {
    background: var(--tab-bar-background-color);
    box-shadow: inset 0 0 0 1px #D6D6D6;

    // This makes it so that we never render a double-width item border.
    // It has the unintended consequence of making it impossible to have a tab
    // bar with just one item but we can live with that.
    border-right-width: 0;
    padding: 3px 25px;

    &:first-child {
      border-radius: var(--border-radius) 0px 0px var(--border-radius);
    }

    &:last-child {
      border-radius: 0px var(--border-radius) var(--border-radius) 0px;
      border-right-width: 1px;
    }

    // We intentionally swap foreground and background here to create
    // a more intense selected state. The tab bar is kind of a special snowflake
    // in so far that it doesn't have an active selection state, just a selected
    // one.
    &.selected {
      background-color: var(--tab-bar-active-color);
      box-shadow: none;
      color: var(--box-selected-background-color);

      .indicator {
        background-color: var(--box-selected-background-color);
      }
    }

    .indicator {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-left: 4px;

      background-color: var(--tab-bar-active-color);
      border-radius: 50%;
    }
  }
}

.tab-bar {

  &-item {
    background: var(--tab-bar-background-color);
    box-shadow: inset 0 0 0 1px #D6D6D6;

    // This makes it so that we never render a double-width item border.
    // It has the unintended consequence of making it impossible to have a tab
    // bar with just one item but we can live with that.
    border-right-width: 0;
    padding: 4px 25px;

    &:first-child {
      border-radius: var(--border-radius) 0px 0px var(--border-radius);
    }

    &:last-child {
      border-radius: 0px var(--border-radius) var(--border-radius) 0px;
      border-right-width: 1px;
    }

    // We intentionally swap foreground and background here to create
    // a more intense selected state. The tab bar is kind of a special snowflake
    // in so far that it doesn't have an active selection state, just a selected
    // one.
    &.selected {
      background-color: var(--tab-bar-active-color);
      box-shadow: none;
      color: var(--box-selected-background-color);

      .indicator {
        background-color: var(--box-selected-background-color);
      }
    }

    .indicator {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-left: 4px;

      background-color: var(--tab-bar-active-color);
      border-radius: 50%;
    }
  }
}

Tweak tab bar padding again
Tweak tab bar padding again
