@import '@scaleflex/widget-core/lib/_utils.scss';
@import '@scaleflex/widget-core/lib/_variables.scss';
@import '@scaleflex/widget-common/lib/style.scss';
// TODO: Remove this import from provider-views and from the 2nd file (LabelsListSkeleton.jsx) then remove it from package.json
@import '@scaleflex/widget-provider-views/lib/style.scss';

// Component-specific css imports
@import './components/CropPanel/index.scss';
@import './components/TopBar/index.scss';

#SfxPopper {
  z-index: 11111111;
}

// ExplorerWrapper.jsx |>>

@keyframes filerobot-Explorer-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes filerobot-Explorer-fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes filerobot-Explorer-slideDownAndFadeIn {
  from {
    transform: translate3d(-50%, -70%, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}

@keyframes filerobot-Explorer-slideDownAndFadeIn--small {
  from {
    transform: translate3d(0, -20%, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes filerobot-Explorer-slideUpFadeOut {
  from {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(-50%, -70%, 0);
    opacity: 0;
  }
}

@keyframes filerobot-Explorer-slideUpFadeOut--small {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(0, -20%, 0);
    opacity: 0;
  }
}

// End Transitions //

.filerobot-Explorer--modal {
  z-index: $zIndex-highest;
}

.filerobot-Explorer-assets-picker-modal {
  z-index: $zIndex-modal;
}

.filerobot-Explorer--modal[aria-hidden=true] {
  display: none;
}

.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose>.filerobot-Explorer-inner {
  animation: filerobot-Explorer-slideDownAndFadeIn--small 0.3s cubic-bezier(0, 0, .2, 1);

  @media #{$screen-medium} {
    animation: filerobot-Explorer-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, .2, 1);
  }
}

.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose>.filerobot-Explorer-overlay {
  animation: filerobot-Explorer-fadeIn 0.3s cubic-bezier(0, 0, .2, 1);
}

.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose.filerobot-Explorer--isClosing>.filerobot-Explorer-inner {
  animation: filerobot-Explorer-slideUpFadeOut--small 0.3s cubic-bezier(0, 0, .2, 1);

  @media #{$screen-medium} {
    animation: filerobot-Explorer-slideUpFadeOut 0.3s cubic-bezier(0, 0, .2, 1);
  }
}

.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose.filerobot-Explorer--isClosing>.filerobot-Explorer-overlay {
  animation: filerobot-Explorer-fadeOut 0.3s cubic-bezier(0, 0, .2, 1);
}

.filerobot-Explorer--modal .filerobot-Explorer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(79, 98, 118, 0.3);
  z-index: $zIndex-2;
  outline: none;
}

.filerobot-Explorer-inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  outline: none;
  border: 1px solid $gray-200;
  border-radius: 5px;

  .filerobot-size--md & {
    min-height: auto;
  }

  .filerobot-Explorer--modal & {
    z-index: $zIndex-3;
  }

  [data-filerobot-theme="dark"] & {
    background-color: $gray-900;
  }
}

.filerobot-Explorer-innerWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: 5px;
  opacity: 0;
  overflow: hidden;
  background: $white;
}

.filerobot-Explorer-close {
  @include clear-focus;
  display: block;
  position: absolute;
  top: -33px;
  right: -2px;
  cursor: pointer;
  color: rgba($white, 0.9);
  font-size: 27px;
  z-index: $zIndex-5;

  @media #{$screen-medium} {
    font-size: 35px;
    top: -10px;
    right: -35px;
  }
}

.filerobot-Explorer--isInnerWrapVisible .filerobot-Explorer-innerWrap {
  opacity: 1;
}

.filerobot-Explorer--modal .filerobot-Explorer-inner {
  position: fixed;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 15px;
  border: none;

  @media #{$screen-medium} {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 15px 4px rgba($black, 0.15);
  }
}

.filerobot-Explorer--move-informer {
  .filerobot.filerobot-Informer {
    bottom: 80px;
  }
}

// ExplorerWrapper.jsx <<|

// Added to body to prevent the page from scrolling when Modal is open
// packages/@scaleflex/widget-explorer/src/index.js |>>
.filerobot-Explorer-isFixed {
  overflow: hidden;
  height: 100vh;
}

// <<|

// packages/@scaleflex/widget-explorer/src/components/AddFilesPanel/AddFiles.jsx
.filerobot-Explorer-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

// <<|


.filerobot-Explorer-TopBar-leftSide {
  height: 100%;
  margin-right: 12px;
}

// <<|

// Is used for overriding ui-kit Tag styles

.filerobot-Explorer-Search-filtersInside-newFilterChip {
  margin-top: 0;
  margin-right: 8px;
  outline: none;

  * {
    outline: none;
  }
}

// <<|


// Fix of TagField fullWidth
// packages/@scaleflex/widget-common/src/FormControl.jsx
.filerobot-common-FormControl .SfxTagField-listWrapper {
  width: 100%;
}

.sort-menuitem.SfxMenuItem-root {
  .SfxMenuItem-Icon.SfxMenuItem-Actions {
    display: none;
  }
}

// Drawer resizer: disable text selection during drag
.filerobot-transparent-selection *::-moz-selection {
  all: inherit;
}
.filerobot-transparent-selection *::selection {
  all: inherit;
}

// <<|