{"version":3,"file":"PopupMenuItemStyles.mjs","sources":["../../../packages/popup-menu/PopupMenuItemStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { PopupMenuVariants } from './types.js'\n\nexport const PopupMenuItemStyle = styled.button<{ $active: boolean }>`\n  text-align: left;\n  display: flex;\n  width: 100%;\n  align-items: stretch;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  background: transparent;\n  border-radius: 0;\n  color: var(--lido-color-text);\n  border: none;\n  box-shadow: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0 15px;\n  margin: 0;\n  position: relative;\n\n  &:disabled {\n    cursor: default;\n    color: var(--lido-color-textSecondary);\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    opacity: ${({ $active }) => ($active ? 0.04 : 0)};\n    background: var(--lido-color-popupMenuItemBgActiveHover);\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  &:focus:not(:disabled):before {\n    opacity: 0.04;\n  }\n`\n\nconst variants = {\n  small: css`\n    padding: 12px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    line-height: 1.35em;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-weight: 800;\n  `,\n  default: css`\n    padding: 18px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    line-height: 1.4em;\n    font-weight: 400;\n  `,\n}\n\nexport const PopupMenuItemContentStyle = styled.span<{\n  $variant: PopupMenuVariants\n}>`\n  position: relative;\n  padding: 18px 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ${({ $variant }) => variants[$variant]}\n`\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: default;\n  display: flex;\n  align-items: center;\n`\n\nexport const PopupMenuItemLeftDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-right: 16px;\n`\n\nexport const PopupMenuItemRightDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-left: 16px;\n`\n"],"names":["PopupMenuItemStyle","styled","button","_ref","$active","_ref2","theme","duration","fast","variants","small","css","_ref3","fontSizesMap","xxs","default","_ref4","xs","PopupMenuItemContentStyle","span","_ref5","$variant","decoratorCSS","PopupMenuItemLeftDecoratorStyle","PopupMenuItemRightDecoratorStyle"],"mappings":";;;AAGaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,MAA4B,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAG,IAAI,GAAG,CAAC,CAAA;AAAA,CAAC,CAAA;AACpD;AACA,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC5D;AACA;AACA;AACA;AACA;AACA,EAAC;AAED,MAAMC,QAAQ,GAAG;AACfC,EAAAA,KAAK,EAAEC,GAAG,CAAA;AACZ;AACA,eAAA,EAAiBC,KAAA,IAAA;IAAA,IAAC;AAAEN,MAAAA,KAAAA;AAAM,KAAC,GAAAM,KAAA,CAAA;AAAA,IAAA,OAAKN,KAAK,CAACO,YAAY,CAACC,GAAG,CAAA;AAAA,GAAA,CAAA;AACtD;AACA;AACA;AACA;AACA,EAAG,CAAA;AACDC,EAAAA,OAAO,EAAEJ,GAAG,CAAA;AACd;AACA,eAAA,EAAiBK,KAAA,IAAA;IAAA,IAAC;AAAEV,MAAAA,KAAAA;AAAM,KAAC,GAAAU,KAAA,CAAA;AAAA,IAAA,OAAKV,KAAK,CAACO,YAAY,CAACI,EAAE,CAAA;AAAA,GAAA,CAAA;AACrD;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAEYC,MAAAA,yBAAyB,GAAGjB,MAAM,CAACkB,IAE9C,CAAA;AACF;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAKX,QAAQ,CAACY,QAAQ,CAAC,CAAA;AAAA,CAAA,CAAA;AACxC,EAAC;AAED,MAAMC,YAAY,GAAGX,GAAG,CAAA;AACxB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYY,MAAAA,+BAA+B,GAAGtB,MAAM,CAACkB,IAAI,CAAA;AAC1D,EAAA,EAAIG,YAAY,CAAA;AAChB;AACA,EAAC;AAEYE,MAAAA,gCAAgC,GAAGvB,MAAM,CAACkB,IAAI,CAAA;AAC3D,EAAA,EAAIG,YAAY,CAAA;AAChB;AACA;;;;"}