"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Emotoins = exports.EmotionWrapper = exports.EmotionTabItem = exports.EmotionTabContainer = exports.EmotionContent = exports.EmotionClose = exports.EmotionBox = exports.EmotionBodyscroll = exports.EmotionBodyItem = exports.EmotionBodyContainer = void 0;

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var EmotionWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  z-index: 2;\n"])));

exports.EmotionWrapper = EmotionWrapper;

var EmotionBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 465px;\n  min-height: 37px;\n  font-size: 12px;\n  border-radius: 6px;\n  box-shadow: rgb(0 0 0 / 15%) 0px 3px 10px 0px;\n  color: #555;\n  background-color: #fff;\n"])));

exports.EmotionBox = EmotionBox;

var EmotionContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 15px;\n  font-size: 12px;\n  line-height: 1em;\n  font-family: OPPOSans, Arial, Verdana, Helvetica Neue, Helvetica, PingFang SC, Microsoft YaHei, sans-serif;\n  color: #555;\n  position: relative;\n"])));

exports.EmotionContent = EmotionContent;

var EmotionClose = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 11px;\n  right: 11px;\n\n  &:hover {\n    color: #e8242a;\n  }\n"])));

exports.EmotionClose = EmotionClose;

var EmotionTabContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-bottom: 1px solid #e4ebf0;\n  display: flex;\n"])));

exports.EmotionTabContainer = EmotionTabContainer;

var EmotionTabItem = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 30px;\n  padding: 0 11px;\n  margin-bottom: -1px;\n  margin-top: -1px;\n  line-height: 30px;\n  border: 1px solid #fff;\n  border-bottom-color: #e4ebf0;\n  color: #3f4755;\n  cursor: pointer;\n\n  &.emotion__tab__item-active {\n    color: #2879ff;\n    border-color: #e4ebf0;\n    border-bottom-color: #fff;\n  }\n"])));

exports.EmotionTabItem = EmotionTabItem;

var EmotionBodyContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\n"])));

exports.EmotionBodyContainer = EmotionBodyContainer;

var EmotionBodyscroll = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 187px;\n  padding-top: 10px;\n  overflow-y: auto;\n"])));

exports.EmotionBodyscroll = EmotionBodyscroll;

var EmotionBodyItem = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 420px;\n  border-top: 1px solid #e9ecf0;\n  border-left: 1px solid #e9ecf0;\n  display: flex;\n  flex-wrap: wrap;\n  cursor: pointer;\n"])));

exports.EmotionBodyItem = EmotionBodyItem;

var Emotoins = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding-bottom: 1%;\n  border-right: 1px solid #e9ecf0;\n  border-bottom: 1px solid #e9ecf0;\n  box-sizing: border-box;\n  text-align: center;\n  position: relative;\n\n  &.emotion__body__item-small {\n    width: 30px;\n    height: 30px;\n    line-height: 30px;\n    img {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  &.emotion__body__item-big {\n    width: 60px;\n    height: 60px;\n    line-height: 60px;\n    img {\n      width: 46px;\n      height: 46px;\n      transition: all .2s ease-in-out;\n    }\n  }\n\n  &:hover {\n    background: rgb(242, 249, 255);\n    &.emotion__body__item-big {\n      img {\n        transform: scale(1.1);\n      }\n    }\n  }\n"])));

exports.Emotoins = Emotoins;