/* reset */
button,
fieldset,
input {
  all: unset;
}

.TabsRoot {
  display: flex;
  flex-direction: column;
  width: auto;
  &.fluid {
    width: 100%;
  }
}

.TabsList {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid var(--border-neutral-subtle);
}

.TabsTrigger {
  font-family: inherit;
  background-color: transparent;
  padding: 0 var(--size-200);
  height: 44px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--foreground-neutral);
  background-color: var(--background-neutral-container);
  user-select: none;
  cursor: pointer;
  position: relative;
  text-wrap: nowrap;
  &:focus-visible {
    box-shadow: var(--focus);
    outline: none;
    z-index: 2;
  }
}
.TabsTrigger:hover {
  color: var(--foreground-neutral);
  background-color: var(--background-neutral);
}
.TabsTrigger[data-state="active"] {
  color: var(--foreground-neutral);
  &:after {
    content: "";
    display: block;
    position: absolute;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // height: 2px;
    // width: 100%;
    background-color: var(--foreground-neutral-subtle);
    bottom: 3px;
    left: 8px;
    right: 8px;
    height: 3px;
    border-radius: 4px;
    width: auto;
  }
}
.TabsTrigger:focus {
  position: relative;
}

.TabsContent {
  flex-grow: 1;
  background-color: var(--background-neutral-container);
  outline: none;
}
.TabsContent:focus {
}