@stokr/components-library/dist/components/Chips/Chip.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrapper = exports.TooltipChipIcon = exports.StyledChip = exports.ChipText = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const StyledChip = exports.StyledChip = _styledComponents.default.div.withConfig({
  displayName: "Chipstyles__StyledChip",
  componentId: "sc-pcmyil-0"
})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], _ref => {
  let {
    isActive
  } = _ref;
  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(TooltipChipIcon, " {\n        color: ").concat(_theme.default.cWhite, ";\n      }\n    ");
});
const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
  displayName: "Chipstyles__Wrapper",
  componentId: "sc-pcmyil-1"
})(["display:flex;gap:32px;", ""], _ref2 => {
  let {
    customWrapperStyle
  } = _ref2;
  return customWrapperStyle;
});
const ChipText = exports.ChipText = _styledComponents.default.span.withConfig({
  displayName: "Chipstyles__ChipText",
  componentId: "sc-pcmyil-2"
})(["text-transform:uppercase;"]);
const TooltipChipIcon = exports.TooltipChipIcon = _styledComponents.default.i.attrs({
  className: 'ion ion-md-information-circle-outline'
}).withConfig({
  displayName: "Chipstyles__TooltipChipIcon",
  componentId: "sc-pcmyil-3"
})(["position:relative;display:inline-block;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;", ":hover &{color:", ";}"], _theme.default.cGrey2, StyledChip, _theme.default.cWhite);