.tabs {
    width: 100%;
}
.tabs[data-orientation="vertical"] {
    display: flex;
}
.tabs__list {
    position: relative;
    display: flex;
}
.tabs__list[data-orientation="horizontal"] {
    align-items: center;
    border-bottom-color: rgb(var(--sm-inactive-border));
    @apply border-b;
}
.tabs__list[data-orientation="vertical"] {
    flex-direction: column;
    align-items: stretch;
    border-right-color: rgb(var(--sm-inactive-border));
    @apply border-r;
}
.tabs__indicator {
    transition: all 250ms;
    background-color: rgb(var(--sm-primary));
    @apply absolute;
}
.tabs__indicator[data-orientation="horizontal"] {
    bottom: -1px;
    height: 2px;
}
.tabs__indicator[data-orientation="vertical"] {
    right: -1px;
    width: 2px;
}
.tabs__trigger {
    display: inline-block;
    padding: 8px 16px;
    outline: none;
}
.tabs__trigger:hover {
    color: rgb(var(--sm-active-foreground));
    background-color: rgb(var(--sm-active-background));
}
.tabs__trigger:focus-visible {
    background-color: hsl(240 5% 96%);
}
.tabs__trigger[data-disabled],
.tabs__trigger[data-disabled]:hover {
    opacity: 0.5;
    background-color: transparent;
}
