var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
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 { Skeleton } from '@scaleflex/ui/core';
import { FV, PC, PSH } from '@filerobot/common';
var Container = styled.div(function (_ref) {
  var theme = _ref.theme;
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  flex-direction: column;\n  width: 40%;\n\n ", " {\n    width: 100%;\n    min-height: 20%;\n    flex-grow: 1;\n    position: relative;\n  }\n\n  ", " & {\n    width: 100%;\n    min-height: 20%;\n    flex-grow: 1;\n    position: relative;\n  }\n\n  ", " & {\n    width: 100%;\n    min-height: 20%;\n    flex-grow: 1;\n    position: relative;\n  }\n"])), theme.palette[PC.BackgroundStateless], theme.shadows[PSH.RightPanelMd], theme.breakpoints.down('lg'), theme.breakpoints.classes.md, theme.breakpoints.classes.sm);
});
var ActiveTabWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow-y: auto;\n"])));
var CloseBtn = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 4px;\n  :hover {\n    background: ", ";\n  }\n  :active {\n    background: ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette[PC.ActiveSecondaryHover];
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette[PC.BackgroundActive];
});
var Tabs = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-shadow: 0px -4px 8px rgba(208, 215, 220, 0.22);;\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette[PC.BordersSecondary];
});
var TabButton = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  flex-grow: 1;\n  padding: 8px 12px 6px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2px;\n  cursor: pointer;\n  border-top: 2px solid ", ";\n  color: ", ";\n\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  :hover {\n    background: ", ";\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.typography.font[FV.TextSmall];
}, function (_ref6) {
  var theme = _ref6.theme,
    isActive = _ref6.isActive;
  return isActive ? theme.palette[PC.AccentStateless] : 'transparent';
}, function (_ref7) {
  var theme = _ref7.theme,
    isActive = _ref7.isActive;
  return theme.palette[isActive ? PC.AccentStateless : PC.TextSecondary];
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette[PC.BackgroundActive];
});
var TabBarSkeleton = styled(Skeleton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n"])));
var Styled = {
  Container: Container,
  CloseBtn: CloseBtn,
  Tabs: Tabs,
  TabButton: TabButton,
  ActiveTabWrapper: ActiveTabWrapper,
  TabBarSkeleton: TabBarSkeleton
};
export default Styled;