@procore/core-react/dist/Pill/Pill.styles.js

React library of Procore Design Guidelines

import { Clear } from '@procore/core-icons';
import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { spacing } from '../_styles/spacing';
import { PillColorPalets } from './Pill.colorPalette';
var pillButtonSize = 16;
export var StyledPill = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledPill",
  componentId: "core-12_44_0__sc-99e1t5-0"
})(["", " display:inline-block;padding:1px ", "px;border:1px solid;border-radius:10px;font-weight:600;& + &{margin-left:", "px;}", ""], getTypographyIntent('small'), spacing.sm, spacing.xs, function (_ref) {
  var $color = _ref.$color;
  return css(["background-color:", ";border-color:", ";color:", ";"], PillColorPalets[$color].backgroundColor, PillColorPalets[$color].borderColor, PillColorPalets[$color].color);
});
export var StyledRemove = /*#__PURE__*/styled(Clear).withConfig({
  displayName: "StyledRemove",
  componentId: "core-12_44_0__sc-99e1t5-1"
})(["border-radius:100%;cursor:pointer;flex:0 0 auto;height:", "px;width:", "px;vertical-align:top;"], pillButtonSize, pillButtonSize);
export var StyledRemoveButton = /*#__PURE__*/styled.button.withConfig({
  displayName: "StyledRemoveButton",
  componentId: "core-12_44_0__sc-99e1t5-2"
})(["border:0;padding:0;border-radius:100%;margin:0 -", "px 0 ", "px;color:inherit;", ""], pillButtonSize / 2 - spacing.xxs, spacing.xxs, function (_ref2) {
  var $color = _ref2.$color;
  return css(["&:hover{background:", ";color:", ";}"], PillColorPalets[$color].color, PillColorPalets[$color].backgroundColor);
});
//# sourceMappingURL=Pill.styles.js.map