$export-crop-padding: 12px;
$export-crop-block-height: 57px;

[data-filerobot-floaty="true"] {
  $export-crop-padding: 20px;
  $export-crop-block-height: 75px;
}

// packages/@filerobot/explorer/src/components/DownloadTransformation/Option.jsx
// packages/@filerobot/explorer/src/components/DownloadTransformation/ImageResize.jsx
.filerobot-Explorer-ImageOptions {
  &-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;

    &-select {
      width: 60%;
      text-align: left;
      text-transform: capitalize;

      &-fullWidth {
        width: 100%;
      }
    }

    &-input {
      width: 60%;
    }
  }

  &-size-options {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 4px;
  }

  &-description {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  &-settings {
    margin-bottom: 10px;
  }

  &-resize-options {
    display: flex;
    align-items: center;
    column-gap: 8px;
  }

  &-download-zip {
    display: flex;
    margin-top: 16px;
  }
}


// TODO for Amr Hamdy to check what these styles for
// >>>
.FIE_root *,
#SfxPopper * {
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 182, 194, 1) rgba(255, 255, 255, 1);

  &::-webkit-scrollbar {
    width: 6px;
    background: rgba(255, 255, 255, 1);
  }

  &::-webkit-scrollbar-track {
    margin-block: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(204, 214, 222, 1);
    border: 4px solid rgba(204, 214, 222, 1);
    border-radius: 99px;
    padding: 4px 6px;
    background-clip: padding-box;
  }
}

.SfxPopper-root {
  &>.SfxMenu-root {
    overflow: hidden auto !important;
  }
}
// <<<