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

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

import{margin as o}from"styled-system";import r,{css as t}from"styled-components";import a from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import i from"../../__internal__/input/input-presentation.style.js";import l from"../../__internal__/input/input.style.js";import e from"../icon/icon.style.js";import n from"../../style/themes/apply-base-theme.js";import s from"../../__internal__/form-field/form-field.style.js";const c=r.div.attrs(n).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-e6eafad8-0"})(["",""],(({isFocused:r,searchWidth:n,maxWidth:c,searchHasValue:d,showSearchButton:p,theme:m,variant:v})=>{const y="dark"===v;return t(["margin-bottom:var(--fieldSpacing);"," width:",";max-width:",";padding-bottom:var(--spacing025);background-color:transparent;display:inline-flex;font-size:var(--fontSize100);"," ","{::-moz-placeholder{color:var(--colorsUtilityYin055);opacity:1;}::placeholder{color:var(--colorsUtilityYin055);}"," ","}",'{[data-element="search"]{height:auto;'," ","}"," "," "," flex:1;font-size:var(--fontSize100);font-weight:500;padding-bottom:var(--spacing025);padding-top:1px;cursor:pointer;"," ","}","{flex:1;z-index:",";}",'{:not([data-element="search"]){'," ","}cursor:pointer;}","{","}"],o,n?`${n}`:"100%",c?`${c}`:"100%",!p&&t(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],y?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)",y?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(d||r)&&t(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),l,y&&t(["::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}"]),y&&d&&!p&&t(["color:var(--colorsUtilityYang100);"]),i,!y&&t(["color:var(--colorsUtilityYin065);:hover{color:var(--colorsUtilityYin100);}"]),y&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),y&&!p&&t(["background-color:transparent;border-color:var(--colorsUtilityYang080);"]),!y&&t(["background-color:",";"],d||r||p?"var(--colorsUtilityYang100)":"transparent"),p&&t(["border-top-right-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius000);"]),!r&&!d&&!p&&t(["border:1px solid transparent;"]),!r&&d&&!p&&t(["background-color:",";"],y?"transparent":"var(--colorsUtilityYang100)"),s,m.zIndex.smallOverlay,e,y&&!p&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!y&&t(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),a,d&&t(["margin-bottom:-1px;"]))}));export{c as default};