discourse/app/assets/stylesheets/common/base/upload.scss

.file-uploader {
  display: flex;
  flex-direction: column;

  &__restrictions {
    font-size: var(--font-down-1);
    color: var(--primary-medium);
    margin-top: 0.25em;
  }

  &__preview {
    position: relative;
    max-width: 400px;
    width: 100%;
    height: 125px;
    box-sizing: border-box;
    border-radius: var(--d-input-border-radius);
    background-origin: content-box;
    background-clip: content-box;

    &:has(.lightbox) {
      height: 85px; // ~125px with controls visible to match above height
    }

    &:focus,
    &:focus-within {
      border-color: var(--tertiary);
      outline: 2px solid var(--tertiary);
      outline-offset: -2px;
    }

    &:hover {
      background-color: var(--tertiary-very-low);

      .has-image &,
      .has-file & {
        background-color: unset;
      }
    }

    .no-image &,
    .no-file & {
      position: relative;
      border: 1px dashed var(--primary-medium);
      background-color: var(--primary-very-low);

      &:hover {
        background-color: var(--tertiary-very-low);
      }

      &:focus,
      &:focus-within {
        outline: 2px dashed var(--tertiary);
      }
    }

    .has-image & {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
      border: 1px solid var(--primary-low-mid);
      padding: var(--space-1);

      &.--bg-size-cover {
        background-size: cover;
        background-position: center;
      }
    }

    .has-file & {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
      border: 1px solid var(--primary-low-mid);
      padding: var(--space-1);

      &:focus,
      &:focus-within {
        border-color: var(--tertiary);
        outline: 2px solid var(--tertiary);
        outline-offset: -2px;
      }
    }

    .file-info {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4);
      background: var(--primary-very-low);
      border-radius: var(--d-input-border-radius);
      height: 100%;
      box-sizing: border-box;

      .file-icon {
        color: var(--primary-medium);
        font-size: var(--font-up-3);
      }

      .file-details {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;

        .file-name {
          font-weight: 500;
          word-break: break-all;
        }

        .file-size {
          color: var(--primary-medium);
          font-size: var(--font-down-1);
        }
      }
    }

    .meta {
      display: none;
    }

    .expand-overlay {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 30;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    &:hover .expand-overlay,
    &:focus-within .expand-overlay {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &__progress-status {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;

    .progress-bar-container {
      --d-border-radius: 10px;
      background: var(--primary-low-mid);
      border-radius: var(--d-border-radius);
      height: 5px;
      position: relative;

      .progress-bar {
        border-radius: var(--d-border-radius);
        height: 100%;
        background: var(--tertiary);
        transition: width 0.3s ease;
        position: absolute;
        left: 0;
        top: 0%;
      }
    }

    span {
      font-size: var(--font-down-2);
      margin-top: 8px;
      display: block;
      text-align: center;
      color: var(--primary-high);
    }
  }

  &__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    .has-file &,
    .has-image & {
      gap: var(--space-2);
      margin-top: var(--space-2);
      justify-content: flex-start;
    }

    label {
      display: flex;
      font-weight: normal;
      box-sizing: border-box;
      color: var(--primary-very-high);
      border-radius: var(--d-button-border-radius);
      cursor: pointer;

      .no-image &,
      .no-file & {
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: var(--space-1);
        padding: var(--space-2);
        white-space: normal;

        &:hover,
        &:focus-visible {
          color: var(--primary-very-high);
        }
      }
    }
  }
}

.hidden-upload-field {
  visibility: hidden;
  position: absolute;
  max-width: 100%;
}