carbon-react/esm/components/pill/pill.style.js

A library of reusable React components for easily building user interfaces.

import o,{css as e}from"styled-components";import{margin as i}from"styled-system";import t from"./pill.style.config.js";import r from"../../style/themes/apply-base-theme.js";import n from"../icon/icon.style.js";import s from"../icon-button/icon-button.style.js";import{toColor as a}from"../../style/utils/color.js";import p from"../../style/utils/get-color-value.js";import l from"../../style/utils/get-hex-value.js";import d from"../../style/utils/get-accessible-foreground-color.js";const h=o.span.attrs(r).withConfig({displayName:"pill.style__StyledPill",componentId:"sc-a06400b-0"})([""," ",""],i,(({wrapText:o,borderColor:i,colorVariant:r,isDarkBackground:h,isDeletable:c,inFill:g,maxWidth:u,pillRole:x,size:m,theme:b})=>{const f="status"===x;let y,v,w;if(i){y=a(b,i);const o=p(y);w=d(l(o),!1,!0)}else{const{status:o,tag:e}=t(h),{varietyColor:i,buttonFocus:n,content:s}=f?o[r]:e.primary;y=i,v=n,w=s}return e(["font-size:12px;letter-spacing:0.7px;font-weight:500;position:relative;display:inline-flex;text-align:center;align-items:center;justify-content:center;border:2px solid ",";border-radius:var(--borderRadius025);height:auto;"," "," color:",";"," "," "," "," "," "," "," ",""],y,!o&&e(["white-space:nowrap;"]),o&&e(["overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:manual;"]),w,g&&e(["background-color:",";"],y),!g&&e(["color:",";"],h?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===m&&e(["min-height:16px;line-height:16px;font-size:12px;padding:0 8px;"]),"M"===m&&e(["min-height:20px;line-height:20px;font-size:14px;padding:0 8px;"]),"L"===m&&e(["min-height:24px;line-height:24px;font-size:14px;padding:0 8px;"]),"XL"===m&&e(["min-height:28px;line-height:28px;font-size:16px;padding:0 12px;"]),c&&e(["","{-webkit-appearance:none;border-radius:var(--borderRadius000);border:none;bottom:0;font-size:100%;position:absolute;right:0;top:0;width:20px;margin:0;line-height:16px;&:focus{border-radius:var(--borderRadius000) var(--borderRadius025) var(--borderRadius025) var(--borderRadius000);::-moz-focus-inner{border:0;}","{color:",";}","}&:hover{background-color:",";cursor:pointer;","{color:",";}}"," ","{height:unset;width:unset;color:",";","}}"," "," "," ",""],s,n,w,i?e(["&::before{border-radius:var(--borderRadius000) var(--borderRadius025) var(--borderRadius025) var(--borderRadius000);}"]):e(["background-color:",";"],v),v,n,w,i&&e(['&:hover,&:focus{&::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:',";filter:brightness(0.9);}}"],y),n,w,!g&&e(["color:",";"],h?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===m&&e(["padding:0 22px 0 8px;","{padding:0;line-height:16px;","{top:-2px;&:before{font-size:16px;}}}"],s,n),"M"===m&&e(["padding:0 28px 0 8px;","{width:24px;padding:0;line-height:15px;}"],s),"L"===m&&e(["padding:0 32px 0 8px;","{width:28px;padding:0;line-height:16px;}"],s),"XL"===m&&e(["padding:0 36px 0 12px;","{width:32px;padding:0;line-height:18px;}"],s)),u&&`max-width: ${u}`)}));export{h as default};