welcome-ui/dist/Tabs.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_102tt_2{position:absolute;will-change:width,transform;transition-property:all;transition-duration:var(--duration-medium);transition-timing-function:var(--timing-primary);background-color:var(--color-brand-40)}[aria-orientation=horizontal] ._root_102tt_2{width:var(--active-bar-size);height:var(--border-width-md);left:0;bottom:0;transform:translate(var(--active-bar-offset))}[aria-orientation=vertical] ._root_102tt_2{width:var(--border-width-md);height:var(--active-bar-size);right:0;top:0;transform:translateY(var(--active-bar-offset))}}@layer components{._root_axn0q_2{width:100%;position:relative;display:flex;overflow-x:auto;border:0;gap:var(--spacing-xl);--tab-font-size: var(--font-size-md);--tab-box-shadow: inset 0 calc(-1 * var(--border-width-sm)) 0 var(--color-neutral-30);font-size:var(--tab-font-size);box-shadow:var(--tab-box-shadow)}._root_axn0q_2[aria-orientation=vertical]{flex-direction:column;--tab-box-shadow: inset calc(-1 * var(--border-width-sm)) 0 0 var(--color-neutral-30)}._size-md_axn0q_18{--tab-font-size: var(--font-size-md)}._size-sm_axn0q_21{--tab-font-size: var(--font-size-sm)}}@layer components{._root_1kepd_2:focus{outline:none}[aria-orientation=horizontal] ._root_1kepd_2{margin-top:var(--spacing-xl)}[aria-orientation=vertical] ._root_1kepd_2{margin-left:var(--spacing-xl)}}@layer components{._root_1j27o_2{border:0;background:none;color:var(--tabs-color, var(--color-neutral-70));font-weight:var(--font-weight-medium);line-height:var(--line-height-md);text-decoration:none;display:flex;align-items:center;flex:none;padding:var(--spacing-md) 0;transition:var(--duration-medium);text-transform:none;cursor:pointer;gap:var(--spacing-sm)}._root_1j27o_2:focus{outline:none!important}._root_1j27o_2:focus:not([aria-selected=true]){--tabs-color: var(--color-neutral-90)}._root_1j27o_2[aria-selected=true]{--tabs-color: var(--color-neutral-90)}._root_1j27o_2[aria-disabled=true]{--tabs-color: var(--color-neutral-60);cursor:not-allowed}._root_1j27o_2:hover:not([aria-selected=true]):not([aria-disabled=true]){--tabs-color: var(--color-neutral-90)}._root_1j27o_2>svg,._root_1j27o_2 img{max-height:var(--spacing-lg);max-width:var(--spacing-lg)}._root_1j27o_2>span{max-height:var(--spacing-lg)}}