@include export-module('files-upload-layout') {
  .co-files-upload {
    &:not(&.empty) {
      min-height: 216px; // default of single tile-render dimensions
      min-width: 117px;

      &.dropzone {
        height: 100px;
        width: 200px;
        max-height: 100px;
        max-width: 200px;
        min-height: 0; // default of single tile-render dimensions
        min-width: 0;
      }
    }

    file-upload {
      margin: 1px;
      margin-bottom: 10px;
    }

    file-upload:not(:last-child) {
      margin-right: 10px;
    }

    file-upload.add-file {
      display: none;
    }

    &.editable {
      file-upload.add-file {
        display: block;
      }
    }

    &.filedrag {
      .drop-files-wrapper {
        display: flex;
      }
    }
    .co-drag-drop-container {
      display: flex;
      padding-top: 30px;
      position: relative;
      margin-top: 0;
      grid-gap: 5px;
      gap: 5px;
      align-items: flex-start;
      flex-direction: column;
    }
    .upload-add-wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .add-dropzone {
        display: flex;
        align-items: center;
        justify-content: center;
        .co-tile-render {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 10px;
          width: 150px;
          height: 100px;
          border: 1px dashed #dddddd;
          .add-button {
            position: relative;
            svg {
              fill: #dddddd;
            }
          }
          .description {
            font-size: 10px;
          }
        }
      }
    }
    .uploaded-images-wrapper {
      display: flex;
      gap: 10px;
      .co-file-upload {
        width: 150px;
      }
    }
  }
}