var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
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 { PC, FV } from '@filerobot/common';
import { Input, TooltipV2, Label as SfxLabel, Button } from '@scaleflex/ui/core';
var FileInfoWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  max-width: ", ";\n  background-color: ", ";\n  transition: all 100ms ease-in-out;\n\n  ", "\n\n  ", " {\n    height: 52px;\n    padding: 8px;\n  }\n\n  ", "  {\n    max-width: 340px;\n  }\n\n  ", "  {\n    max-width: 480px;\n  }\n"])), function (_ref) {
  var isListView = _ref.isListView;
  return isListView ? '280px' : 'auto';
}, function (_ref2) {
  var isListView = _ref2.isListView,
    selected = _ref2.selected,
    palette = _ref2.theme.palette;
  return !isListView ? palette[selected ? PC.BordersItem : PC.BackgroundHover] : '';
}, function (_ref3) {
  var isListView = _ref3.isListView;
  return !isListView && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: end;\n    height: 56px;\n    padding: 8px 12px 12px 12px;\n  "])));
}, function (_ref4) {
  var isListView = _ref4.isListView,
    breakpoints = _ref4.theme.breakpoints;
  return !isListView && breakpoints.down('lg');
}, function (_ref5) {
  var isListView = _ref5.isListView,
    breakpoints = _ref5.theme.breakpoints;
  return isListView && breakpoints.up('xxl');
}, function (_ref6) {
  var isListView = _ref6.isListView,
    breakpoints = _ref6.theme.breakpoints;
  return isListView && breakpoints.up('xxxl');
});
var FirstRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n"])));
var FileExtension = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  text-align: start;\n  text-transform: lowercase;\n  ", "\n  color: ", ";\n  max-width: 60px;\n  margin-left: 4px;\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.typography.font[FV.LabelSmall];
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette[PC.TextSecondary];
});
var FileName = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: ", ";\n  text-align: left;\n  color: ", ";\n  ", "\n\n  [data-filerobot-theme=\"dark\"] & {\n    color: $gray-200;\n  }\n"])), function (props) {
  return props.isListView ? '100%' : '80%';
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette[PC.TextPrimary];
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.typography.font[FV.LabelMedium];
});
var FileRename = styled(Input)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 16px;\n  padding: 0 10px 0 4px;\n"])));
var SecondRow = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
var LeftSection = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: inline-flex;\n"])));
var RightSection = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
var FileInfoIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  margin-right: 8px;\n  top: ", ";\n  ", "\n"])), function (_ref11) {
  var isLabelIcon = _ref11.isLabelIcon;
  return isLabelIcon ? '3px' : 'auto';
}, function (props) {
  return props.isLastIcon && "\n      justify-content: flex-end;\n      margin-right: 0px;\n  ";
});
var LabelTooltipTitle = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n  margin-bottom: 8px;\n"])));
var LabelsTooltip = styled(TooltipV2)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  background-color: ", ";\n  padding-bottom: 0px;\n  max-width: 276px;\n  gap: 12px;\n  border-radius: 4px;\n  padding: 8px;\n\n  .SfxTooltipV2-content {\n    flex-wrap: wrap;\n    gap: 4px;\n\n    button {\n      flex-grow: 1;\n    }\n  }\n\n  .tippy-arrow:before {\n    color: ", ";\n  }\n\n  .SfxButton-StartIcon {\n    margin-top: 4px;\n  }\n"])), function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.palette[PC.BackgroundStateless];
});
var Label = styled(SfxLabel)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  cursor: ", ";\n  line-height: 16px;\n\n  ", "\n"])), function (_ref14) {
  var defaultCursor = _ref14.defaultCursor;
  return defaultCursor ? 'default' : 'pointer';
}, function (_ref15) {
  var $ellipsis = _ref15.$ellipsis;
  return $ellipsis && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  "])));
});
var ClickableText = styled(Button)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  text-decoration: underline;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  min-width: 54px;\n  min-height: 20px;\n  border-radius: 4px;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  .SfxButton-Label {\n    ", ";\n  }\n\n  .SfxButton-StartIcon {\n    margin-right: 4px;\n  }\n\n  .SfxButton-Body {\n    padding: 4px 8px;\n  }\n"])), function (_ref16) {
  var theme = _ref16.theme;
  return theme.palette[PC.AccentStateless];
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.palette[PC.IconsPlaceholder];
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.palette[PC.IconsPlaceholder];
}, function (_ref19) {
  var typography = _ref19.theme.typography;
  return typography.font[FV.LinkMedium];
});
var Styled = {
  FileInfoWrapper: FileInfoWrapper,
  FirstRow: FirstRow,
  FileExtension: FileExtension,
  FileName: FileName,
  FileRename: FileRename,
  SecondRow: SecondRow,
  LeftSection: LeftSection,
  RightSection: RightSection,
  FileInfoIcon: FileInfoIcon,
  LabelTooltipTitle: LabelTooltipTitle,
  LabelsTooltip: LabelsTooltip,
  Label: Label,
  ClickableText: ClickableText
};
export default Styled;