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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.DotUI = exports.TypingDotsUI = void 0;

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

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

var config = {
  gap: 3,
  size: 5
};
var TypingDotsUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "TypingDotscss__TypingDotsUI",
  componentId: "s1ammo-0"
})(["align-items:flex-end;color:", ";display:flex;width:", "px;"], (0, _color.getColor)('grey.800'), config.size * 3 + config.gap * 2);
exports.TypingDotsUI = TypingDotsUI;
var DotUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "TypingDotscss__DotUI",
  componentId: "s1ammo-1"
})(["animation:bounceAnimation 1.3s linear infinite;animation-delay:", ";background-color:currentColor;border-radius:50%;height:", "px;margin-right:", "px;opacity:", ";width:", "px;@keyframes bounceAnimation{0%,60%,100%{transform:initial;}30%{transform:translateY(-10px);}}&:last-child{margin-right:0;}"], function (props) {
  return props.delay;
}, config.size, config.gap, function (props) {
  return props.opacity;
}, config.size);
exports.DotUI = DotUI;