@bothub-chat/ui/dist/components/tab/styled.js

Bothub UI Components

import{styled as o,css as e}from"styled-components";import{Typography as r}from"../typography/index.js";import{adaptive as a}from"../../adaptive/index.js";const t=o.button.withConfig({displayName:"styled__TabStyled",componentId:"sc-12prpad-0"})(["display:inline-flex;outline:none;border:1px solid ",";background:",";border-radius:8px;padding:0px;cursor:",";overflow:hidden;box-sizing:border-box;flex-shrink:0;transition:border-color 0.3s ease-out,background-color 0.3s ease-out,transform 0.2s ease-out;"," ",""],(({theme:o,$active:e})=>e?o.colors.accent.primary:o.colors.grayScale.gray3),(({theme:o,$active:e})=>e?o.colors.accent.primary:"rgba(0, 0, 0, 0)"),(({$active:o})=>o?"default":"pointer"),a((()=>({merge:!0,desktop:e`
      padding: 10px 20px;
    `,tablet:e`
      padding: 12px 20px;
    `}))),(({$active:o})=>!o&&e`
      &:hover {
        border-color: ${({theme:o})=>o.colors.grayScale.gray3};
        background-color: ${({theme:o})=>o.colors.grayScale.gray3};
      }
      &:active {
        transform: translateY(1px);
      }
    `)),i=o(r).attrs({variant:"body-m-semibold"}).withConfig({displayName:"styled__TabText",componentId:"sc-12prpad-1"})(["color:",";"],(({theme:o,$active:e})=>e?o.default.colors.base.white:o.colors.base.white));export{t as TabStyled,i as TabText};