"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Wrapper = exports.Title = exports.PlaceHolder = exports.List = exports.Item = exports.Icon = exports.Head = void 0;

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

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 Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 262px;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 16px 0px;\n  border: 1px solid #f7f8fa;\n  border-radius: 12px;\n  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);\n  background: #ffffff;\n  box-sizing: content-box;\n"])));

exports.Wrapper = Wrapper;

var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 36px;\n  margin: 0 20px 8px;\n  padding: 8px 15px;\n  border-radius: 8px;\n  background: #f7f8fa;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));

exports.Head = Head;

var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: 14px;\n  height: 20px;\n  color: #3f4755;\n  cursor: default;\n  text-align: center;\n\n  &:hover {\n    color: #3f4755;\n  }\n"])));

exports.Title = Title;

var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: all 0.3s ease-in;\n  color: #3f4755;\n\n  &:hover {\n    color: #2879ff;\n  }\n\n  &.disabled {\n    color: #bfc7d5;\n    cursor: default;\n\n    &:hover {\n      color: #bfc7d5;\n    }\n  }\n"])));

exports.Icon = Icon;

var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding: 0 11px;\n  box-sizing: border-box;\n"])));

exports.List = List;

var getItemWidthBySize = function getItemWidthBySize(size) {
  if (size == 's') return 48;
  if (size == 'm') return 72;
  return 72;
};

var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 17px;\n  border-radius: 8px;\n  transition: all 0.3s ease-in;\n  box-sizing: border-box;\n  color: #6f7886;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  flex-shrink: 0;\n\n  &.active,\n  &:hover {\n    color: #2879ff;\n  }\n\n  &:hover {\n    background: #F7F8FA;\n  }\n"])), function (p) {
  return getItemWidthBySize(p.size);
});

exports.Item = Item;

var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: 0;\n"])), function (p) {
  return getItemWidthBySize(p.size);
});

exports.PlaceHolder = PlaceHolder;