var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { css } from 'styled-components';
import { StatusLabel, Search } from '@scaleflex/ui/core';
import { FV, PC } from '@filerobot/common';
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* TODO: To Add transition */\n  overflow: hidden;\n  padding: 0 24px;\n"])));
var Actions = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 40px;\n  gap: 12px;\n  margin-top: 12px;\n\n  span {\n    ", ";\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.typography.font[FV.TitleH5];
});
var Carousel = styled.div(function (_ref2) {
  var theme = _ref2.theme;
  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 170px;\n  margin-top: 12px;\n\n  ", " {\n    height: 146px;\n  }\n\n  ", " & {\n    height: 146px;\n  }\n\n  ", " & {\n    height: 146px;\n  }\n"])), theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
});
var SpinnerWrapper = styled.div(function (_ref3) {
  var theme = _ref3.theme;
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 170px;\n  margin-top: 12px;\n\n  ", " {\n    height: 146px;\n  }\n"])), theme.breakpoints.down('lg'));
});
var Item = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 200px;\n  height: 100%;\n  border-radius: 2px;\n  border: 1px solid ", ";\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  cursor: pointer;\n  background: ", ";\n\n  :hover {\n    background: ", ";\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme,
    $isActive = _ref4.$isActive;
  return theme.palette[PC[$isActive ? 'AccentStateless' : 'BordersItem']];
}, function (_ref5) {
  var $isActive = _ref5.$isActive,
    theme = _ref5.theme;
  return theme.palette[PC[$isActive ? 'BackgroundGrey' : 'BackgroundHover']];
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette[PC.BackgroundActive];
});
var ItemImg = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 120px;\n  flex-grow: 1;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n  pointer-events: none;\n\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette[PC.BackgroundStateless];
});
var ItemFooterWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
var ItemNameWrapper = styled.div(function (_ref8) {
  var theme = _ref8.theme;
  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 8px;\n  height: 28px;\n  ", ";\n  color: ", ";\n\n  ", " {\n    padding: 4px;\n  }\n\n  ", " & {\n    padding: 4px;\n  }\n\n  ", " & {\n    padding: 4px;\n  }\n"])), function (_ref9) {
    var theme = _ref9.theme;
    return theme.typography.font[FV.LabelExtraSmallUp];
  }, function (_ref10) {
    var theme = _ref10.theme;
    return theme.palette[PC.TextPrimary];
  }, theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
});
var ItemName = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"])));
var AddVariantBtn = styled.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: 2px;\n  cursor: pointer;\n  width: 200px;\n  height: 100%;\n  flex-shrink: 0;\n  user-select: none;\n  ", ";\n  color: ", ";\n\n  > svg {\n    color: ", ";\n  }\n\n  :hover {\n    background: ", ";\n  }\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette[PC.BackgroundHover];
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette[PC.BordersItem];
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.typography.font[FV.ButtonMdEmphasis];
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.palette[PC.LinkStateless];
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.palette[PC.IconsPlaceholder];
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.palette[PC.BackgroundPrimaryHover];
});
var AddVariantBtnLabel = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  margin-top: 12px;\n"])));
var SearchInput = styled(Search)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  width: 100%;\n  max-width: 280px;\n"])));
var NoVariantsPlaceholderWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  white-space: break-spaces;\n  ", ";\n  color: ", ";\n  padding: 24px;\n  height: 100%;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n"])), function (_ref17) {
  var theme = _ref17.theme;
  return theme.typography.font[FV.LabelMedium];
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.palette[PC.LinkStateless];
});
var NoVariantsPlaceholder = styled.label(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  word-break: break-word;\n  overflow: overlay;\n"])));
var VariantBadge = styled(StatusLabel)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background: ", ";\n  ", ";\n"])), function (_ref19) {
  var theme = _ref19.theme,
    $isSecondaryColor = _ref19.$isSecondaryColor;
  return theme.palette[PC[$isSecondaryColor ? 'BackgroundPrimaryActive' : 'AccentStateless']];
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.typography.font[FV.LabelSmall];
});
var HighlightedName = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), function (_ref21) {
  var theme = _ref21.theme;
  return theme.palette[PC.Accent_1_8_Opacity];
});
var VariantName = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  word-wrap: break-word;\n  text-align: center;\n"])));
var Styled = {
  Wrapper: Wrapper,
  Actions: Actions,
  Carousel: Carousel,
  SpinnerWrapper: SpinnerWrapper,
  AddVariantBtn: AddVariantBtn,
  AddVariantBtnLabel: AddVariantBtnLabel,
  NoVariantsPlaceholderWrapper: NoVariantsPlaceholderWrapper,
  NoVariantsPlaceholder: NoVariantsPlaceholder,
  Item: Item,
  ItemImg: ItemImg,
  ItemNameWrapper: ItemNameWrapper,
  ItemName: ItemName,
  SearchInput: SearchInput,
  VariantBadge: VariantBadge,
  HighlightedName: HighlightedName,
  VariantName: VariantName,
  ItemFooterWrapper: ItemFooterWrapper
};
export default Styled;