.tabs {
  display: flex;
  column-gap: 4px;
  align-items: center;
  padding: 4px;
  margin: 8px 0;
  background-color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;

  & .tab {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: var(--font-sm);
    color: var(--color-foreground-subtle);
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
    transition: 0.2s;

    &:focus-visible {
      outline: 2px solid var(--color-neutral-400);
      outline-offset: 2px;
    }

    &.selected {
      color: var(--color-foreground);
      background-color: var(--color-neutral-200);
      border-color: var(--color-neutral-300);
    }

    &:not(.selected):hover,
    &:not(.selected):focus-visible {
      color: var(--color-foreground);
      background-color: var(--color-neutral-100);
    }
  }
}