[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; } } }