:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --focus-ring: The focus ring's box shadow.
 */
:host {
  --focus-ring: inset 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
  display: inline-block;
}

.tab {
  display: inline-flex;
  align-items: center;
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-small);
  font-weight: var(--sl-font-weight-semibold);
  border-radius: 4px;
  color: var(--sl-color-gray-600);
  padding: var(--sl-spacing-small) var(--sl-spacing-large);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: var(--transition-speed) box-shadow, var(--transition-speed) color;
}
.tab:hover:not(.tab--disabled) {
  color: var(--sl-color-blue-600);
}
.tab:focus {
  outline: none;
}
.tab:focus:not(.tab--disabled) {
  color: var(--sl-color-blue-600);
  box-shadow: var(--focus-ring);
}
.tab.tab--active:not(.tab--disabled) {
  color: var(--sl-color-blue-600);
}
.tab.tab--closable {
  padding-right: var(--sl-spacing-small);
}
.tab.tab--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab__close-button {
  font-size: var(--sl-font-size-large);
  margin-left: var(--sl-spacing-xx-small);
}
.tab__close-button::part(base) {
  padding: var(--sl-spacing-xxx-small);
}