opencode/packages/ui/src/components/tabs.css

[data-component="tabs"] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background-stronger);
  overflow: clip;

  [data-slot="list"] {
    height: 48px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    overflow-x: auto;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }

    /* After element to fill remaining space */
    &::after {
      content: "";
      display: block;
      flex-grow: 1;
      height: 100%;
      border-bottom: 1px solid var(--border-weak-base);
      background-color: var(--background-base);
    }

    &:empty::after {
      display: none;
    }
  }

  [data-slot="trigger"] {
    position: relative;
    height: 100%;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    color: var(--text-base);

    /* text-14-medium */
    font-family: var(--font-family-sans);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-large); /* 142.857% */
    letter-spacing: var(--letter-spacing-normal);

    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-weak-base);
    border-right: 1px solid var(--border-weak-base);
    background-color: var(--background-base);

    &:disabled {
      pointer-events: none;
      color: var(--text-weaker);
    }
    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--border-focus);
    }
    &[data-selected] {
      color: var(--text-strong);
      background-color: transparent;
      border-bottom-color: transparent;
    }
    &:hover:not(:disabled):not([data-selected]) {
      color: var(--text-strong);
    }
  }

  [data-slot="content"] {
    overflow-y: auto;
    flex: 1;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }

    &:focus-visible {
      outline: none;
    }
  }
}