AlchemyCMS/alchemy_cms

.upload-button {
  display: inline-block;

  label {
    cursor: pointer;
  }
}

.fileupload--field {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.dragover,
#main_content.dragover {
  position: relative;

  &:after {
    align-items: center;
    background-color: rgba($dark-gray, 0.6);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.6)"><path d="M1 14.5C1 12.1716 2.22429 10.1291 4.06426 8.9812C4.56469 5.044 7.92686 2 12 2C16.0731 2 19.4353 5.044 19.9357 8.9812C21.7757 10.1291 23 12.1716 23 14.5C23 17.9216 20.3562 20.7257 17 20.9811L7 21C3.64378 20.7257 1 17.9216 1 14.5ZM16.8483 18.9868C19.1817 18.8093 21 16.8561 21 14.5C21 12.927 20.1884 11.4962 18.8771 10.6781L18.0714 10.1754L17.9517 9.23338C17.5735 6.25803 15.0288 4 12 4C8.97116 4 6.42647 6.25803 6.0483 9.23338L5.92856 10.1754L5.12288 10.6781C3.81156 11.4962 3 12.927 3 14.5C3 16.8561 4.81833 18.8093 7.1517 18.9868L7.325 19H16.675L16.8483 18.9868ZM13 13V17H11V13H8L12 8L16 13H13Z"></path></svg>');
    background-repeat: no-repeat;
    background-size: 80px 80px;
    background-position: center;
    content: "";
    display: flex;
    justify-content: center;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 20;
  }
}

alchemy-upload-progress {
  --border-radius: var(--border-radius_medium);
  --pogress_value-width: calc(232px - var(--spacing-2));

  background-color: var(--file-upload_background-color);
  bottom: -100%;
  display: grid;
  font-size: var(--font-size_medium);
  gap: var(--spacing-4);
  grid-template-columns: calc(100% - var(--pogress_value-width)) calc(
      var(--pogress_value-width) - var(--spacing-2)
    );
  height: auto;
  left: 0;
  opacity: 0;
  padding: var(--spacing-4);
  position: fixed;
  transition: $transition-duration ease-in-out;
  width: 100%;
  z-index: 150;

  &.visible {
    bottom: 0;
    opacity: 1;
  }

  .overall-progress-value {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .value-text {
    color: var(--font-color_default);
    font-size: var(--font-size_large);
    font-weight: var(--font-weigth_bold);
    min-width: 100px;
  }

  .single-uploads {
    --padding: var(--spacing-2);
    --progress-border-radius: var(--border-radius_medium)
      var(--border-radius_medium) 0 0;
    --progress-height: var(--spacing-1);

    display: grid;
    gap: var(--spacing-2);
    grid-template-columns: repeat(var(--progress-columns, 3), minmax(0, 1fr));

    alchemy-file-upload {
      align-items: center;
      background-color: var(--file-upload_single-upload-background-color);
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      display: flex;
      gap: var(--spacing-2);
      margin-top: var(--progress-height);
      padding: var(--padding);
      position: relative;

      img {
        height: 60px;
        object-fit: contain;
        width: 60px;
      }

      .description {
        align-self: start;
        max-width: 100%;
        overflow: hidden;
      }

      span {
        display: block;
      }

      .file-name {
        @extend %text-overflow;
      }

      .loaded-size,
      .error-message {
        font-size: var(--font-size_small);
      }

      .error-message {
        color: var(--font-color_failed);
      }

      button {
        margin-left: auto; // right align button
        &:hover,
        &:active {
          background-color: $default-border-color;
        }
      }

      &:not(.in-progress) button {
        display: none;
      }
    }

    sl-progress-bar {
      --height: var(--progress-height);
      left: 0;
      position: absolute;
      top: calc(-1 * var(--progress-height) / 2);
      width: 100%;
    }
  }

  sl-progress-bar {
    --indicator-color: var(--file-upload_progress-indicator-color);
    --sl-border-radius-pill: var(--border-radius);
    --track-color: var(--file-upload_progress-track-color);
    &::part(base) {
      top: calc(50% - var(--height) / 2);
    }
  }
}

.successful {
  --file-upload_progress-indicator-color: var(
    --file-upload_progress-indicator-color-successful
  );
}

.failed {
  --file-upload_progress-indicator-color: var(
    --file-upload_progress-indicator-color-failed
  );
}

.canceled {
  --file-upload_progress-indicator-color: var(
    --file-upload_progress-indicator-color-canceled
  );
}

.invalid {
  --file-upload_progress-indicator-color: var(
    --file-upload_progress-indicator-color-invalid
  );
}

.upload-finished {
  --file-upload_progress-indicator-color: var(
    --file-upload_progress-indicator-color-upload-finished
  );
}