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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.TimerUI = exports.TextUI = exports.NotificationUI = exports.config = void 0;

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

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

var _depth = require("../../styles/mixins/depth.css");

var _Animate = _interopRequireDefault(require("../Animate"));

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

var config = {
  borderRadius: {
    md: '8px',
    sm: '2px'
  },
  bubbleClassName: '.c-Notification__messageBubble'
};
exports.config = config;
var NotificationUI = (0, _styledComponents.default)(_Animate.default).withConfig({
  displayName: "Notificationcss__NotificationUI",
  componentId: "sc-14pxvd1-0"
})(["max-width:300px;", "{", " cursor:pointer;max-width:100%;text-align:right;transition:border-radius 200ms ease;}& + &{", "{border-top-right-radius:", " !important;}}&:last-child{", "{border-top-right-radius:", " !important;border-bottom-left-radius:", " !important;}}&.is-align-right{margin-left:auto;", "{border-top-left-radius:", " !important;border-top-right-radius:", " !important;border-bottom-right-radius:", " !important;border-bottom-left-radius:", " !important;}&:only-child{", "{border-top-right-radius:", " !important;}}&:not(:only-child){", "{border-top-right-radius:", " !important;}}&:first-child:not(:last-child){", "{border-top-right-radius:", " !important;}}}&.is-align-left{margin-right:auto;", "{border-top-left-radius:", " !important;border-top-right-radius:", " !important;border-bottom-right-radius:", " !important;border-bottom-left-radius:", " !important;text-align:left;}.c-MessageChatBlock__flexy{justify-content:flex-start;}.c-MessageBubble__from{text-align:left;}&:only-child{", "{border-top-left-radius:", " !important;}}&:not(:only-child){", "{border-top-right-radius:", " !important;border-bottom-left-radius:", " !important;}}&:first-child:not(:only-child){", "{border-top-left-radius:", " !important;border-bottom-left-radius:", " !important;border-bottom-right-radius:", " !important;}}}"], config.bubbleClassName, _depth.d600, config.bubbleClassName, config.borderRadius.md, config.bubbleClassName, config.borderRadius.md, config.borderRadius.md, config.bubbleClassName, config.borderRadius.md, config.borderRadius.sm, config.borderRadius.sm, config.borderRadius.md, config.bubbleClassName, config.borderRadius.md, config.bubbleClassName, config.borderRadius.sm, config.bubbleClassName, config.borderRadius.md, config.bubbleClassName, config.borderRadius.sm, config.borderRadius.md, config.borderRadius.md, config.borderRadius.sm, config.bubbleClassName, config.borderRadius.md, config.bubbleClassName, config.borderRadius.md, config.borderRadius.sm, config.bubbleClassName, config.borderRadius.md, config.borderRadius.sm, config.borderRadius.md);
exports.NotificationUI = NotificationUI;
var TextUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Notificationcss__TextUI",
  componentId: "sc-14pxvd1-1"
})(["color:", ";"], (0, _color.getColor)('charcoal.500'));
exports.TextUI = TextUI;
var TimerUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Notificationcss__TimerUI",
  componentId: "sc-14pxvd1-2"
})(["animation-fill-mode:forward;animation-name:HSDSNotificationTimer;animation-iteration-count:1;animation-duration:5000ms;animation-play-state:running;@keyframes HSDSNotificationTimer{}"]);
exports.TimerUI = TimerUI;