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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.PrefixUI = exports.ValueUI = exports.CopyValueUI = exports.IconButtonUI = exports.ConfirmationIconWrapperUI = void 0;

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

var _IconButton = _interopRequireDefault(require("../IconButton"));

var _Text = _interopRequireDefault(require("../Text"));

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

var ConfirmationIconWrapperUI = _styledComponents.default.span.withConfig({
  displayName: "CopyValuecss__ConfirmationIconWrapperUI",
  componentId: "sc-23ak1k-0"
})(["display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;top:0;z-index:2;opacity:0;transition:opacity linear 150ms;color:white;background:var(--buttonMainColor);border-radius:100px;"]);

exports.ConfirmationIconWrapperUI = ConfirmationIconWrapperUI;
var IconButtonUI = (0, _styledComponents.default)(_IconButton.default).withConfig({
  displayName: "CopyValuecss__IconButtonUI",
  componentId: "sc-23ak1k-1"
})(["margin-left:5px;&&&{--buttonHeight:32px;--buttonPadding:0px;--buttonBackgroundColor:transparent;--buttonBorderColor:transparent;--buttonBackgroundColorHover:var(--buttonMainColor);--buttonBorderColorHover:var(--buttonMainColor);--buttonColor:var(--iconTextColor);width:var(--buttonHeight);min-width:0;&:focus,&.is-focused{--buttonBackgroundColor:var(--buttonMainColor);--buttonBorderColor:var(--buttonMainColor);--buttonColor:white;}&:focus:not(:focus-visible){--buttonBackgroundColor:transparent;--buttonBorderColor:transparent;--buttonColor:var(--iconTextColor);}&:focus-visible,&.is-copyConfirmed{--buttonColor:white;--buttonBackgroundColor:var(--buttonMainColor);--buttonBorderColor:var(--buttonMainColor);}.has-icon{margin:0;}&.is-copyConfirmed ", "{opacity:1;}}"], ConfirmationIconWrapperUI);
exports.IconButtonUI = IconButtonUI;

var CopyValueUI = _styledComponents.default.div.withConfig({
  displayName: "CopyValuecss__CopyValueUI",
  componentId: "sc-23ak1k-2"
})(["display:flex;align-items:center;--iconActiveColor:", ";--iconInactiveColor:transparent;--iconTextColor:var(--iconInactiveColor);&:focus-within,&:hover{--iconTextColor:var(--iconActiveColor);}"], (0, _color.getColor)('charcoal.500'));

exports.CopyValueUI = CopyValueUI;
var ValueUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "CopyValuecss__ValueUI",
  componentId: "sc-23ak1k-3"
})(["font-family:var(--HSDSGlobalFontFamilySystem);color:", ";"], (0, _color.getColor)('charcoal.400'));
exports.ValueUI = ValueUI;

var PrefixUI = _styledComponents.default.span.withConfig({
  displayName: "CopyValuecss__PrefixUI",
  componentId: "sc-23ak1k-4"
})(["color:", ";margin-right:5px;"], (0, _color.getColor)('grey.800'));

exports.PrefixUI = PrefixUI;