$folder-bg: #f5f5f5;
$file-preview-transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

.folders {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  &__list {
    width: 100%;
    display: flex;
    justify-content: center;
    &__folder {
      padding: 0 20px;
      &--selected {
        background-color: $folder-bg;
      }
    }
  }
  &__selected-folder-files {
    padding-top: 40px;
    width: 100%;
    background-color: $folder-bg;
    &__file {
      display: block; // necessary for cdk-drag transitions
    }
  }
}

.file-drag-preview {
  padding: 10px 20px;
  background: transparent;
  font-size: 32px;
}
.file-drop-placeholder {
  min-height: 60px;
  transition: $file-preview-transition;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
