:host {
  display: flex;
  height: var(--swirl-tab-bar-height);
}

  :host * {
    box-sizing: border-box;
  }

.tab-bar {
  position: relative;
  display: flex;
  overflow-x: auto;
  width: 100%;
  justify-content: flex-start;
  scrollbar-width: none;
}

.tab-bar.tab-bar--variant-default {
    border-bottom: var(--swirl-tab-bar-border-width) solid
      var(--s-border-default);
  }

.tab-bar.tab-bar--variant-pill {
    gap: var(--s-space-8);
  }

.tab-bar--justify-evenly > * {
  flex: 1;
}

.tab-bar__tab {
  position: relative;
  display: flex;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  margin: 0;
  justify-content: center;
  align-items: center;
  border: none;
  font: inherit;
  font-weight: var(--s-font-weight-medium);
  line-height: var(--s-line-height-lg);
  cursor: pointer;
}

.tab-bar__tab.tab-bar__tab--variant-default {
    padding: var(--s-space-4) var(--s-space-8);
    color: var(--s-interactive-neutral-default);
    background-color: transparent;
  }

.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover {
        color: var(--s-interactive-neutral-hovered);
      }

.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover:after {
          position: absolute;
          bottom: 0;
          left: 50%;
          width: calc(100% - var(--s-space-8));
          height: 0.1875rem;
          border-radius: 0.125rem;
          background-color: var(--s-border-default);
          content: "";
          transform: translateX(-50%);
          pointer-events: none;
        }

.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix {
          color: var(--s-interactive-neutral-hovered);
        }

.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active {
        color: var(--s-interactive-neutral-pressed);
      }

.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active .tab-bar__tab-suffix {
          color: var(--s-interactive-neutral-pressed);
        }

.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active {
      color: var(--s-text-highlight);
    }

.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active:after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: calc(100% - var(--s-space-8));
        height: 0.1875rem;
        border-radius: 0.125rem;
        background-color: var(--s-border-highlight);
        content: "";
        transform: translateX(-50%);
        pointer-events: none;
      }

.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active .tab-bar__tab-suffix {
        color: var(--s-text-highlight);
      }

.tab-bar__tab.tab-bar__tab--variant-default:focus {
      outline: none;
    }

.tab-bar__tab.tab-bar__tab--variant-default:focus-visible .tab-bar__tab-label {
        border-radius: var(--s-border-radius-s);
        box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);
      }

.tab-bar__tab.tab-bar__tab--variant-pill {
    padding: var(--s-space-8) var(--s-space-16);
    border-radius: var(--s-border-radius-full-round);
    color: var(--s-text-default);
    background: var(--s-action-neutral-default);
    gap: var(--s-space-8);
  }

.tab-bar__tab.tab-bar__tab--variant-pill:hover {
      background: var(--s-action-neutral-hovered);
    }

.tab-bar__tab.tab-bar__tab--variant-pill:active {
      background: var(--s-action-neutral-pressed);
    }

.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active {
      color: var(--s-text-on-action-primary);
      background: var(--s-action-primary-default);
    }

.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active .tab-bar__tab-suffix {
        color: var(--s-text-on-action-primary);
      }

.tab-bar__tab.tab-bar__tab--variant-pill:focus-visible {
      outline-color: var(--s-focus-default);
      outline-offset: var(--s-space-2);
    }

.tab-bar__tab.tab-bar__tab--variant-pill .tab-bar__tab-suffix {
      color: var(--s-text-subdued);
    }

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.tab-bar__tab {
    padding: calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }

.tab-bar__tab-icon {
  display: inline-flex;
}

.tab-bar__tab-label {
  display: inline-flex;
  padding: var(--s-space-8) var(--s-space-8);
  text-align: center;
  white-space: nowrap;
  gap: var(--s-space-4);
}

.tab-bar__tab-label.tab-bar__tab-label--variant-pill {
    padding: 0;
  }

.tab-bar__tab-suffix {
  color: var(--s-interactive-neutral-default);
  font-weight: var(--s-font-weight-normal);
}