import { FixedSizeList as List } from 'react-window';
import styled from 'styled-components';
import { Button } from '../../Button/Button';
import { Thumbnail } from '../../Thumbnail/Thumbnail';
import { getTypographyIntent } from '../../Typography/Typography.styles';
import { colors } from '../../_styles/colors';
import { spacing } from '../../_styles/spacing';
export var StyledThumbnailListContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledThumbnailListContainer",
  componentId: "core-12_10_0__sc-1fz4ynb-0"
})(["display:flex;flex-direction:column;align-items:stretch;outline:none;"]);
export var StyledThumbnailList = /*#__PURE__*/styled(List).withConfig({
  displayName: "StyledThumbnailList",
  componentId: "core-12_10_0__sc-1fz4ynb-1"
})(["outline:none;"]);
export var StyledThumbnail = /*#__PURE__*/styled(Thumbnail).withConfig({
  displayName: "StyledThumbnail",
  componentId: "core-12_10_0__sc-1fz4ynb-2"
})(["flex-grow:1;justify-content:flex-start;"]);
export var StyledProgress = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledProgress",
  componentId: "core-12_10_0__sc-1fz4ynb-3"
})(["width:146px;padding:0 ", "px 0 ", "px;margin-left:auto;"], spacing.lg, spacing.xl);
export var StyledThumbnailListItem = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledThumbnailListItem",
  componentId: "core-12_10_0__sc-1fz4ynb-4"
})(["display:flex;flex-grow:1;align-items:center;padding:", "px ", "px ", "px ", "px;", " ", " ", " ", ""], spacing.sm, spacing.lg, spacing.sm, spacing.sm, getTypographyIntent('body'), function (_ref) {
  var error = _ref.error;
  return !error && "\n      &:hover {\n        background-color: ".concat(colors.gray96, ";\n      }\n    ");
}, function (_ref2) {
  var focused = _ref2.focused,
    error = _ref2.error;
  return focused && !error && "\n      background-color: ".concat(colors.gray96, ";\n    ");
}, function (_ref3) {
  var error = _ref3.error;
  return error && "\n      background-color: ".concat(colors.red98, ";\n\n      ").concat(StyledProgress, " {\n        color: ").concat(colors.red50, ";\n      }\n    ");
});
export var StyledDeleteIcon = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledDeleteIcon",
  componentId: "core-12_10_0__sc-1fz4ynb-5"
})([""]);
//# sourceMappingURL=ThumbnailList.styles.js.map