@helpscout/hsds-react/components/IconButton/IconButton.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ChildrenUI = exports.IconButtonUI = exports.StatusUI = exports.IconContainerUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Button = require("../Button/Button.css");

var _color = require("../../styles/utilities/color");

var IconContainerUI = _styledComponents.default.span.withConfig({
  displayName: "IconButtoncss__IconContainerUI",
  componentId: "hv9ipu-0"
})(["display:inline-flex;align-items:center;justify-content:center;.c-Avatar{width:100%;height:100%;}"]);

exports.IconContainerUI = IconContainerUI;

var StatusUI = _styledComponents.default.span.withConfig({
  displayName: "IconButtoncss__StatusUI",
  componentId: "hv9ipu-1"
})(["--statusSize:14px;content:'';position:absolute;width:var(--statusSize);border-top-left-radius:calc(var(--statusSize) * 2);border-top-right-radius:calc(var(--statusSize) * 2);aspect-ratio:2;right:-1px;top:-1px;background:var(--buttonBackgroundColor);border:1px solid var(--buttonBorderColor);border-bottom:0;transform:rotate(40deg);&:before{content:'';position:absolute;width:calc(var(--statusSize) - 2px);height:calc(var(--statusSize) - 2px);right:0;top:0;background:var(--buttonBackgroundColor);border-radius:100%;}&:after{--iconSize:calc(calc(var(--statusSize) - 2px) / 2);content:'';position:absolute;width:var(--iconSize);height:var(--iconSize);right:calc(var(--iconSize) / 2);top:calc(var(--iconSize) / 2);background:", ";border-radius:100%;}"], (0, _color.getColor)('pink.900'));

exports.StatusUI = StatusUI;
var IconButtonUI = (0, _styledComponents.default)(_Button.ButtonUI).withConfig({
  displayName: "IconButtoncss__IconButtonUI",
  componentId: "hv9ipu-2"
})(["border-radius:100px;--focusRingRadius:100px;&.is-size-xl,&.is-size-lg{min-width:var(--buttonHeight);--buttonPadding:3px;}&.is-size-sm{min-width:var(--buttonHeight);--buttonPadding:2px;}&.has-icon-only{min-width:0;width:var(--buttonHeight);padding:var(--buttonPadding);}", "{height:calc(var(--buttonHeight) - calc(var(--buttonPadding) * 2) - 2px);aspect-ratio:1;}&.is-style-outlined:not(.has-children):not(.is-seamless){box-shadow:inset 0 0 0 3px white;}&.with-status{position:relative;&:hover,&.is-active,&:active{", "{border-color:var(--buttonBorderColorHover);}&.is-style-filled{", "{&:before{background:var(--buttonBackgroundColorHover);}}}}&.is-disabled,&[disabled]{&.is-style-filled ", "{border-color:", " !important;&:before{background:", " !important;}}}&.is-seamless ", "{border-color:transparent;background:transparent;right:1px;top:1px;&:before{display:none;}}&.is-size-sm ", "{--statusSize:10px;}}"], IconContainerUI, StatusUI, StatusUI, StatusUI, (0, _color.getColor)('grey.500'), (0, _color.getColor)('grey.500'), StatusUI, StatusUI);
exports.IconButtonUI = IconButtonUI;

var ChildrenUI = _styledComponents.default.span.withConfig({
  displayName: "IconButtoncss__ChildrenUI",
  componentId: "hv9ipu-3"
})(["margin-left:8px;margin-right:16px;&.has-icon{margin-left:4px;}"]);

exports.ChildrenUI = ChildrenUI;