@guruhotel/aura-ui/esm/tabs/tabs.styles.js

⚛️ React UI library by GuruHotel

import{styled as o}from"../theme";import*as t from"@radix-ui/react-tabs";export const StyledTabs=o(t.Root,{display:"flex",flexDirection:"column",width:300,boxShadow:"0 2px 10px $colors$blackA4"});export const StyledList=o(t.List,{flexShrink:0,display:"flex",borderBottom:"1px solid $colors$gray6"});export const StyledTrigger=o(t.Trigger,{all:"unset",backgroundColor:"white",padding:"0 20px",height:45,flex:1,display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1,userSelect:"none",variants:{colorScheme:{text:{"&:hover":{color:"$text11"},'&[data-state="active"]':{color:"$text11",boxShadow:"inset 0 -1px 0 0 $colors$text11, 0 1px 0 0 $colors$text11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$text12"}},guru:{"&:hover":{color:"$guru11"},'&[data-state="active"]':{color:"$guru11",boxShadow:"inset 0 -1px 0 0 $colors$guru11, 0 1px 0 0 $colors$guru11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$guru12"}},fellow:{"&:hover":{color:"$fellow11"},'&[data-state="active"]':{color:"$fellow11",boxShadow:"inset 0 -1px 0 0 $colors$fellow11, 0 1px 0 0 $colors$fellow11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$fellow12"}},darkie:{"&:hover":{color:"$darkie11"},'&[data-state="active"]':{color:"$darkie11",boxShadow:"inset 0 -1px 0 0 $colors$darkie11, 0 1px 0 0 $colors$darkie11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$darkie12"}},red:{"&:hover":{color:"$red11"},'&[data-state="active"]':{color:"$red11",boxShadow:"inset 0 -1px 0 0 $colors$red11, 0 1px 0 0 $colors$red11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$red12"}},nature:{"&:hover":{color:"$nature11"},'&[data-state="active"]':{color:"$nature11",boxShadow:"inset 0 -1px 0 0 $colors$nature11, 0 1px 0 0 $colors$nature11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$nature12"}},sunshine:{"&:hover":{color:"$sunshine11"},'&[data-state="active"]':{color:"$sunshine11",boxShadow:"inset 0 -1px 0 0 $colors$sunshine11, 0 1px 0 0 $colors$sunshine11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$sunshine12"}},violet:{"&:hover":{color:"$violet11"},'&[data-state="active"]':{color:"$violet11",boxShadow:"inset 0 -1px 0 0 $colors$violet11, 0 1px 0 0 $colors$violet11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$violet12"}},gray:{"&:hover":{color:"$gray11"},'&[data-state="active"]':{color:"$gray11",boxShadow:"inset 0 -1px 0 0 $colors$gray11, 0 1px 0 0 $colors$gray11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$gray12"}},primary:{"&:hover":{color:"$primary11"},'&[data-state="active"]':{color:"$primary11",boxShadow:"inset 0 -1px 0 0 $colors$primary11, 0 1px 0 0 $colors$primary11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$primary12"}},secondary:{"&:hover":{color:"$secondary11"},'&[data-state="active"]':{color:"$secondary11",boxShadow:"inset 0 -1px 0 0 $colors$secondary11, 0 1px 0 0 $colors$secondary11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$secondary12"}},utilitary:{"&:hover":{color:"$utilitary11"},'&[data-state="active"]':{color:"$utilitary11",boxShadow:"inset 0 -1px 0 0 $colors$utilitary11, 0 1px 0 0 $colors$utilitary11"},_focus:{position:"relative",boxShadow:"0 0 0 2px $colors$utilitary12"}}},size:{xs:{height:40,fontSize:"$xs"},sm:{height:45,fontSize:"$sm"},md:{height:50,fontSize:"$sm"},lg:{height:55,fontSize:"$md"},xl:{height:60,fontSize:"$md"}},rounded:{none:{rounded:"$none"},xs:{"&:first-child":{borderTopLeftRadius:"$xs"},"&:last-child":{borderTopRightRadius:"$xs"}},sm:{"&:first-child":{borderTopLeftRadius:"$sm"},"&:last-child":{borderTopRightRadius:"$sm"}},md:{"&:first-child":{borderTopLeftRadius:"$md"},"&:last-child":{borderTopRightRadius:"$md"}},lg:{"&:first-child":{borderTopLeftRadius:"$lg"},"&:last-child":{borderTopRightRadius:"$lg"}},xl:{"&:first-child":{borderTopLeftRadius:"$xl"},"&:last-child":{borderTopRightRadius:"$xl"}},"2xl":{"&:first-child":{borderTopLeftRadius:"$2xl"},"&:last-child":{borderTopRightRadius:"$2xl"}},"3xl":{"&:first-child":{borderTopLeftRadius:"$3xl"},"&:last-child":{borderTopRightRadius:"$3xl"}},full:{"&:first-child":{borderTopLeftRadius:"$full"},"&:last-child":{borderTopRightRadius:"$full"}}}},defaultVariants:{colorScheme:"guru",size:"xl",rounded:"xs"}});export const StyledContent=o(t.Content,{flexGrow:1,padding:20,backgroundColor:"white",outline:"none","&:focus-visible":{boxShadow:"0 0 0 2px $colors$guru12"},variants:{rounded:{none:{rounded:"$none"},xs:{borderBottomLeftRadius:"$xs",borderBottomRightRadius:"$xs"},sm:{borderBottomLeftRadius:"$sm",borderBottomRightRadius:"$sm"},md:{borderBottomLeftRadius:"$md",borderBottomRightRadius:"$md"},lg:{borderBottomLeftRadius:"$lg",borderBottomRightRadius:"$lg"},xl:{borderBottomLeftRadius:"$xl",borderBottomRightRadius:"$xl"},"2xl":{borderBottomLeftRadius:"$2xl",borderBottomRightRadius:"$2xl"},"3xl":{borderBottomLeftRadius:"$3xl",borderBottomRightRadius:"$3xl"},full:{borderBottomLeftRadius:"$full",borderBottomRightRadius:"$full"}}},defaultVariants:{rounded:"xs"}});