var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
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 { LAYOUTS_IDS } from '@filerobot/utils/lib/constants';
import { FV, PC } from '@filerobot/common';
import { NoResult } from '@scaleflex/icons';
var listLayoutMixin = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  [data-filerobot-theme=\"dark\"] & {\n    /* TODO: TO be checked about this static color? */\n    background-color: #1f1f1f;\n  }\n\n  .filerobot-Provider-list-cell {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    white-space: nowrap;\n    text-align: left;\n    cursor: pointer;\n    font-size: 14px;\n    flex: 0.5 0;\n\n    &-cursor-default {\n      cursor: default !important;\n    }\n  }\n\n  .filerobot-Provider-list-cell-icon {\n    max-width: 24px;\n    min-width: 20px;\n  }\n\n  .filerobot-Provider-list-firstColumn {\n    display: flex;\n    align-items: center;\n    flex: 1 0;\n\n    input, label {\n      width: 80%;\n    }\n\n    label {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n  }\n\n  .filerobot-ProviderBrowser-list { outline: none; }\n\n  li.filerobot-ProviderBrowserItem {\n    outline: none;\n    display: flex;\n    align-items: center;\n    padding: 11px 12px;\n    margin: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n\n    [data-filerobot-theme=\"dark\"] & {\n      /* TODO: TO be checked about this static color? */\n      color: #eaeaea;\n    }\n  }\n\n  .filerobot-ProviderBrowser-body {\n    width: 100%;\n    overflow-x: auto;\n  }\n\n  .filerobot-Provider-ItemCategory {\n    &-header {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      text-align: left;\n      padding: 12px;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 16px;\n      border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);\n      position: sticky;\n      top: -1px;\n      background-color: #fff;\n      z-index: 11;\n\n      &:last-child { margin-right: 0; }\n\n      .filerobot-c-icon { vertical-align: middle; }\n    }\n\n    &-wrapper-list { padding: 0; }\n  }\n\n\n  // Checkbox\n  .filerobot-ProviderBrowserItem-fakeCheckbox {\n    margin-right: 8px;\n    vertical-align: middle;\n  }\n\n  // Either a <label/> for a file,\n  // or a <button/> we can click on for a folder\n  .filerobot-ProviderBrowserItem {\n    /* TODO: TO be checked about this static color? */\n    color: #4D4E4E;\n\n    &-inner {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      width: 100%;\n      line-height: 1.3;\n      outline: none;\n\n    input { height: 17px; }\n\n      img,\n      svg {\n        max-width: 20px;\n        max-height: 20px;\n      }\n    }\n\n    &--selected {\n      background: ", ";\n      color: ", ";\n      border-bottom: 1px solid ", " !important;\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n\n  .filerobot-Provider-listHead-checkbox {\n    min-width: 16px;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette[PC.BackgroundPrimaryActive];
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette[PC.IconsPlaceholder];
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette[PC.IconsPlaceholder];
});
var gridLayoutMixin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ul.filerobot-ProviderBrowser-list {\n      &::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n      }\n\n      &::-webkit-scrollbar-track { background: transparent; }\n\n      &::-webkit-scrollbar-thumb {\n        background: #cbd3da;\n        border-radius: 10px;\n      }\n\n      &::after {\n        content: '';\n        flex: auto;\n      }\n\n      &:focus { outline: none; }\n    }\n\n    .filerobot-Provider-ItemCategory {\n      &-header {\n        display: flex;\n        align-items: center;\n        font-weight: 400;\n        width: 100%;\n        max-width: 130px;\n        padding: 0 12px;\n        margin-top: 12px;\n        cursor: pointer;\n        font-size: 12px;\n\n        [data-filerobot-floaty=\"true\"] & {\n          padding: 0 20px;\n        }\n      }\n\n      &-wrapper {\n        padding: 8px 11px 24px 24px;\n\n        &-list {\n          list-style: none;\n          padding: 0;\n          width: 100%;\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n        }\n\n        [data-filerobot-floaty=\"true\"] & {\n          padding: 8px 11px 24px 24px;\n        }\n      }\n    }\n\n    li.filerobot-ProviderBrowserItem {\n      min-width: 200px;\n      position: relative;\n      margin: 0;\n\n      &::before {\n        content: '';\n        padding-top: 88%;\n        display: block;\n      }\n\n      &--selected.item-folder,\n      &.item-folder:hover {\n        .filerobot-ProviderBrowserItem-folderSelectBox {\n          display: flex;\n        }\n      }\n\n      &:not(.filerobot-ProviderBrowserItem--beingRenamed):hover {\n        .filerobot-Explorer-dots-menu-icon {\n          display: block;\n        }\n      }\n\n      &:not(.item-folder) {\n        outline: none;\n        border: 4px solid transparent;\n\n        [data-filerobot-floaty=\"true\"] & {\n          border-width: 6px;\n        }\n\n        [data-filerobot-theme=\"dark\"] & {\n          /* TODO: TO be checked about this static color? */\n          border: 4px solid #000000;\n          /* TODO: TO be checked about this static color? */\n          background-color: #4D4E4E;\n\n          &:hover *,\n          &:focus * {\n            /* TODO: TO be checked about this static color? */\n            color: #000000;\n          }\n        }\n\n        &.no-selection {\n          .filerobot-ProviderBrowserItem-inner {\n            cursor: auto;\n          }\n        }\n\n        &:not(.no-selection) {\n          .filerobot-ProviderBrowserItem-inner:hover {\n            background-color: ", ";\n          }\n        }\n      }\n    }\n\n    .filerobot-ProviderBrowserItem-videoDuration {\n      position: absolute;\n      bottom: 33%;\n      z-index: 2;\n      background: rgba(79, 98, 118, 0.7);\n      border-radius: 2px;\n      left: 16px;\n      padding: 2px 4px;\n      text-align: center;\n      font-weight: 500;\n      line-height: 12px;\n      font-size: 11px;\n      box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);\n      color: #fff !important;\n    }\n\n    li.filerobot-ProviderBrowserItem--selected {\n      .filerobot-ProviderBrowserItem-inner {\n        background-color: ", " !important;\n\n        * {\n          fill: ", ";\n          color: ", ";\n        }\n      }\n\n      // As with-meta is related to the explorer only so that the styles would be applied to the explorer cards only.\n      &.with-meta {\n        input {\n          text-align: center;\n          color: #000 !important;\n          margin-top: 4px;\n          margin-bottom: -1px;\n        }\n\n        button.filerobot-ProviderBrowserItem-inner {\n          &:focus {\n            box-shadow: none !important;\n          }\n        }\n      }\n\n      .filerobot-Explorer-Item-fileInfoAndButtons {\n        background-color: inherit;\n      }\n    }\n\n    li.filerobot-ProviderBrowserItem--noPreview {\n      .filerobot-ProviderBrowserItem-inner {\n        /* TODO: TO be checked about this static color? */\n        background-color: rgba(147, 147, 147, 0.2);\n\n        [data-filerobot-theme=\"dark\"] & {\n          /* TODO: TO be checked about this static color? */\n          background-color: rgba(234, 234, 234, 0.2);\n        }\n      }\n\n      svg {\n        /* TODO: TO be checked about this static color? */\n        fill: rgba(0, 0, 0, 0.7);\n        width: 30%;\n        height: 30%;\n\n        [data-filerobot-theme=\"dark\"] & {\n          fill: rgba(", ", 0.8);\n        }\n      }\n    }\n\n    // button with a large picture\n    button.filerobot-ProviderBrowserItem-inner {\n      overflow: hidden;\n      position: absolute;\n      text-align: center;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      border-radius: 2px;\n      box-shadow: 0px 1px 2px 0px rgba(77, 78, 78, 0.15);\n      background-color: ", ";\n\n      &:focus {\n        outline: none;\n      }\n\n      &.with-meta {\n        display: flex;\n        flex-direction: column-reverse;\n        align-items: center;\n        justify-content: flex-end;\n\n        &:focus {\n          box-shadow: none;\n        }\n\n        img {\n          object-fit: contain;\n          width: 100%;\n          height: 100%;\n          max-width: 100%;\n          max-height: 100%;\n        }\n      }\n    }\n\n    // Checkbox\n    .filerobot-ProviderBrowserItem-fakeCheckbox {\n      display: none;\n      position: absolute;\n      z-index: 3;\n      top: 8px;\n      left: 8px;\n    }\n\n    .filerobot-ProviderBrowserItem-folderSelectBox {\n      top: 26px;\n      left: 14px;\n      position: absolute;\n      display: none;\n\n      // As floaty mode has more padding for aligning it veritcally we increase the top value\n      [data-filerobot-floaty=\"true\"] & {\n        top: 17px;\n      }\n    }\n\n  .filerobot-ProviderBrowserItem--selected {\n    .filerobot-ProviderBrowserItem-fakeCheckbox {\n      display: block;\n    }\n  }\n\n  .filerobot-ProviderBrowserItem-fakeCheckbox {\n    *:hover > & {\n      display: block;\n    }\n  }\n\n\n  .filerobot-Dragging-folders,\n  .filerobot-Dragging-files {\n    & > * {\n      pointer-events: none;\n    }\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette[PC.BackgroundPrimaryHover];
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette[PC.BackgroundPrimaryActive];
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette[PC.BackgroundStateless];
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette[PC.BackgroundPrimaryHover];
});
var getLayoutMixin = function getLayoutMixin(_ref12) {
  var viewLayout = _ref12.viewLayout;
  switch (viewLayout) {
    case LAYOUTS_IDS.LAYOUT:
      return listLayoutMixin;
    case LAYOUTS_IDS.GRID:
    default:
      return gridLayoutMixin;
  }
};
var ViewWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  font-size: 14px;\n  font-weight: 400;\n  height: 100%;\n  position: relative;\n  background-color: ", ";\n\n  [data-filerobot-floaty=\"true\"] & {\n    background-color: transparent;\n  }\n\n  ", "\n"])), function (_ref13) {
  var theme = _ref13.theme;
  return theme.palette[PC.BackgroundStateless];
}, getLayoutMixin);
var ViewErrorPlaceholder = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  flex-direction: column;\n  padding: 16px;\n"])));
var ViewErrorTitle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 8px 0;\n  ", ";\n  color: ", ";\n"])), function (_ref14) {
  var theme = _ref14.theme;
  return theme.typography.font[FV.TitleH4];
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.palette[PC.TextSecondary];
});
var ViewDescriptionWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-align: center;\n"])));
var ViewErrorDescription = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 8px 4px 8px 0;\n  color: ", ";\n"])), function (_ref16) {
  var theme = _ref16.theme;
  return theme.palette[PC.TextSecondary];
});
var ViewErrorIcon = styled(NoResult)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref17) {
  var theme = _ref17.theme;
  return theme.palette[PC.IconsPlaceholder];
});
var Styled = {
  ViewWrapper: ViewWrapper,
  ViewErrorPlaceholder: ViewErrorPlaceholder,
  ViewErrorIcon: ViewErrorIcon,
  ViewErrorTitle: ViewErrorTitle,
  ViewDescriptionWrapper: ViewDescriptionWrapper,
  ViewErrorDescription: ViewErrorDescription
};
export default Styled;