.amplify-storagemanager {
  &__dropzone {
    background-color: var(
      --amplify-components-storagemanager-dropzone-background-color
    );
    border-color: var(--amplify-components-storagemanager-dropzone-border-color);
    border-radius: var(
      --amplify-components-storagemanager-dropzone-border-radius
    );
    border-style: var(--amplify-components-storagemanager-dropzone-border-style);
    border-width: var(--amplify-components-storagemanager-dropzone-border-width);
    text-align: var(--amplify-components-storagemanager-dropzone-text-align);
    padding-block: var(
      --amplify-components-storagemanager-dropzone-padding-block
    );
    padding-inline: var(
      --amplify-components-storagemanager-dropzone-padding-inline
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--amplify-components-storagemanager-dropzone-gap);

    &--small {
      flex-direction: row;
      justify-content: center;
    }

    &--active {
      border-color: var(
        --amplify-components-storagemanager-dropzone-active-border-color
      );
      border-width: var(
        --amplify-components-storagemanager-dropzone-active-border-width
      );
      background-color: var(
        --amplify-components-storagemanager-dropzone-active-background-color
      );
    }

    &__icon {
      font-size: var(--amplify-components-storagemanager-dropzone-icon-font-size);
      color: var(--amplify-components-storagemanager-dropzone-icon-color);
    }

    &__text {
      color: var(--amplify-components-storagemanager-dropzone-text-color);
      font-size: var(--amplify-components-storagemanager-dropzone-text-font-size);
      font-weight: var(
        --amplify-components-storagemanager-dropzone-text-font-weight
      );
    }
  }
  
  &__file__list {
    display: flex;
    flex-direction: var(--amplify-components-storagemanager-filelist-flex-direction);
    gap: var(--amplify-components-storagemanager-filelist-gap);
  }

  &__file {
    position: relative;
    border-width: var(--amplify-components-storagemanager-file-border-width);
    border-style: var(--amplify-components-storagemanager-file-border-style);
    border-color: var(--amplify-components-storagemanager-file-border-color);
    border-radius: var(--amplify-components-storagemanager-file-border-radius);
    display: flex;
    flex-direction: column;
    padding-inline: var(--amplify-components-storagemanager-file-padding-inline);
    padding-block: var(--amplify-components-storagemanager-file-padding-block);
    align-items: var(--amplify-components-storagemanager-file-align-items);

    &__wrapper {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--amplify-components-storagemanager-file-gap);
    }
    &__name {
      text-overflow: ellipsis;
      overflow: hidden;
      font-weight: var(--amplify-components-storagemanager-file-name-font-weight);
      font-size: var(--amplify-components-storagemanager-file-name-font-size);
      color: var(--amplify-components-storagemanager-file-name-color);
    }

    &__size {
      font-weight: var(--amplify-components-storagemanager-file-size-font-weight);
      font-size: var(--amplify-components-storagemanager-file-size-font-size);
      color: var(--amplify-components-storagemanager-file-size-color);
    }

    &__main {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
    }

    &__image {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--amplify-components-storagemanager-file-image-width);
      height: var(--amplify-components-storagemanager-file-image-height);
      background-color: var(
        --amplify-components-storagemanager-file-image-background-color
      );
      border-radius: var(
        --amplify-components-storagemanager-file-image-border-radius
      );
      color: var(--amplify-components-storagemanager-file-image-color);
      img {
        max-height: 100%;
      }
    }

    &__status {
      &--error {
        color: var(--amplify-colors-font-error);
        font-size: var(--amplify-components-storagemanager-file-size-font-size);
      }
      &--success {
        color: var(--amplify-colors-font-success);
      }
    }
  }

  &__loader {
    stroke-linecap: var(
      --amplify-components-storagemanager-loader-stroke-linecap
    );
    stroke: var(--amplify-components-storagemanager-loader-stroke-empty);
    stroke-width: var(--amplify-components-storagemanager-loader-stroke-width);
    height: var(--amplify-components-storagemanager-loader-stroke-width);

    --amplify-components-loader-linear-stroke-filled: var(
      --amplify-components-storagemanager-loader-stroke-filled
    );

    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  // Previewer
  &__previewer {
    display: flex;
    flex-direction: column;
    max-width: var(--amplify-components-storagemanager-previewer-max-width);
    max-height: var(--amplify-components-storagemanager-previewer-max-height);

    overflow: auto;
    gap: var(--amplify-components-storagemanager-previewer-body-gap);
    padding-inline: var(
      --amplify-components-storagemanager-previewer-body-padding-inline
    );
    padding-block: var(
      --amplify-components-storagemanager-previewer-body-padding-block
    );

    background-color: var(
      --amplify-components-storagemanager-previewer-background-color
    );
    border-width: var(--amplify-components-storagemanager-previewer-border-width);
    border-style: var(--amplify-components-storagemanager-previewer-border-style);
    border-color: var(--amplify-components-storagemanager-previewer-border-color);
    border-radius: var(
      --amplify-components-storagemanager-previewer-border-radius
    );

    &__text {
      font-weight: var(
        --amplify-components-storagemanager-previewer-text-font-weight
      );
      font-size: var(
        --amplify-components-storagemanager-previewer-text-font-size
      );
      color: var(--amplify-components-storagemanager-previewer-text-color);
    }
  }
}