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

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),i=require("./pill.style.config.js"),r=require("../../style/themes/apply-base-theme.js"),o=require("../icon/icon.style.js"),s=require("../icon-button/icon-button.style.js"),a=require("../../style/utils/color.js"),l=require("../../style/utils/get-color-value.js"),n=require("../../style/utils/get-hex-value.js"),d=require("../../style/utils/get-accessible-foreground-color.js");function p(e){return e&&e.__esModule?e:{default:e}}const u=p(e).default.span.attrs(r.default).withConfig({displayName:"pill.style__StyledPill",componentId:"sc-a06400b-0"})([""," ",""],t.margin,(({wrapText:t,borderColor:r,colorVariant:p,isDarkBackground:u,isDeletable:c,inFill:h,maxWidth:g,pillRole:x,size:f,theme:b})=>{const y="status"===x;let v,m,w;if(r){v=a.toColor(b,r);const e=l.default(v);w=d.default(n.default(e),!1,!0)}else{const{status:e,tag:t}=i.default(u),{varietyColor:r,buttonFocus:o,content:s}=y?e[p]:t.primary;v=r,m=o,w=s}return e.css(["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:",";"," "," "," "," "," "," "," ",""],v,!t&&e.css(["white-space:nowrap;"]),t&&e.css(["overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:manual;"]),w,h&&e.css(["background-color:",";"],v),!h&&e.css(["color:",";"],u?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===f&&e.css(["min-height:16px;line-height:16px;font-size:12px;padding:0 8px;"]),"M"===f&&e.css(["min-height:20px;line-height:20px;font-size:14px;padding:0 8px;"]),"L"===f&&e.css(["min-height:24px;line-height:24px;font-size:14px;padding:0 8px;"]),"XL"===f&&e.css(["min-height:28px;line-height:28px;font-size:16px;padding:0 12px;"]),c&&e.css(["","{-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.default,o.default,w,r?e.css(["&::before{border-radius:var(--borderRadius000) var(--borderRadius025) var(--borderRadius025) var(--borderRadius000);}"]):e.css(["background-color:",";"],m),m,o.default,w,r&&e.css(['&:hover,&:focus{&::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:',";filter:brightness(0.9);}}"],v),o.default,w,!h&&e.css(["color:",";"],u?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)"),"S"===f&&e.css(["padding:0 22px 0 8px;","{padding:0;line-height:16px;","{top:-2px;&:before{font-size:16px;}}}"],s.default,o.default),"M"===f&&e.css(["padding:0 28px 0 8px;","{width:24px;padding:0;line-height:15px;}"],s.default),"L"===f&&e.css(["padding:0 32px 0 8px;","{width:28px;padding:0;line-height:16px;}"],s.default),"XL"===f&&e.css(["padding:0 36px 0 12px;","{width:32px;padding:0;line-height:18px;}"],s.default)),g&&`max-width: ${g}`)}));exports.default=u;