src/constants/tabs.scss
%tab-list {
  .tab-list {
    width: 100%;
    height: 28px;
    display: flex;
    border-radius: 4px;
    color: var(--text-color);

    .tab-options-button {
      background-color: transparent;
      text-align: center;
      vertical-align: middle;
      line-height: 24px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      flex: 1;
      border-radius: 0px;
      cursor: pointer;

      &:first-child {
        border-start-start-radius: 4px;
        border-end-start-radius: 4px;
      }

      &:last-child {
        border-start-end-radius: 4px;
        border-end-end-radius: 4px;
      }

      &:hover {
        background: var(--popup-button-hover);
      }

      &.selected {
        background: var(--tab-color-selected);
        cursor: default;
      }

      &:focus-visible {
        outline: var(--focus-visible-outline);
      }
    }
  }
}

%tab-panel {
  .tab-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    &:focus-visible {
      outline: var(--focus-visible-outline) !important;
    }
  }
}

@mixin tab-border-defaults {
  .tab-list {
    .tab-options-divider + .tab-options-button {
      border-inline-start: none !important;
    }

    .tab-options-button {
      border-top: solid 1px var(--tab-border-color);
      border-bottom: solid 1px var(--tab-border-color);

      &:first-child {
        border-inline-start: 1px solid var(--tab-border-color);
      }

      &:last-child {
        border-inline-end: 1px solid var(--tab-border-color);
      }

      &:hover {
        background: var(--tab-background-color-hover);
        border-top: solid 1px var(--tab-border-color-hover);
        border-bottom: solid 1px var(--tab-border-color-hover);
        border-inline-end: 1px solid var(--tab-border-color-hover);

        + div {
          border-inline-start: none;
        }

        + button {
          border-inline-start: none;
        }
      }

      &.selected {
        background: var(--tab-color-selected);
        border: 1px solid var(--tab-color-selected);
        color: var(--tab-text-color-selected);

        + div {
          border-inline-start: none !important;
        }

        + button {
          border-inline-start: none !important;
        }
      }

      &:not(.selected) {
        border-inline-end: solid 1px var(--tab-border-color);
      }
    }
  }
}
