@use 'sprucecss/scss/spruce' as *;

.file-list {
  @include generate-variables($form-control, $include: ('border-width', 'border-radius'));
  display: flex;
  flex-direction: column;
  gap: spacer('s');

  &__items {
    @include clear-list;
    border: config('border-width', $form-control) solid color('border', 'form');
    border-radius: config('border-radius', $form-control);
    padding: spacer('xs');

    > li + li {
      border-block-start: config('border-width', $form-control) solid color('border');
      margin-block-start: spacer('xs');
      padding-block-start: spacer('xs');
    }
  }
}

.file-list-item {
  align-items: center;
  display: flex;
  gap: spacer('s');
  justify-content: space-between;

  &__icon {
    align-items: center;
    aspect-ratio: 1;
    background-color: color('background', 'media');
    border-radius: config('border-radius-sm', $display);
    display: flex;
    inline-size: 2.5rem;
    justify-content: center;

    svg {
      --size: 1rem;
      block-size: var(--size);
      color: color('icon', 'media');
      inline-size: var(--size);
    }
  }

  &__column {
    align-items: center;
    display: flex;
    gap: spacer('s');
  }

  &__thumbnail {
    aspect-ratio: 1;
    border-radius: config('border-radius-sm', $display);
    inline-size: 2.5rem;
  }

  &__name {
    @include text-ellipsis(1);
    max-inline-size: 10ch;

    @include breakpoint('xs') {
      max-inline-size: 25ch;
    }
  }

  &__actions {
    align-items: center;
    display: flex;
    gap: spacer('xxs');
  }
}

<div class="form-group">
    <span class="form-label">Gallery</span>
    <div class="file-list">
        <button class="btn btn--primary btn--block">Choose file(s)</button>
        <ul class="file-list__items">
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <img class="file-list-item__thumbnail" src="https://picsum.photos/80/80" alt=""/>
                    <span class="file-list-item__name" id="list-item-1">pic1234.jpg</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Move one up" disabled="disabled">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="18 15 12 9 6 15"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Move one down">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Remove">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
            </li>
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <span class="file-list-item__icon">
                        <svg aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                    </span>
                    <span class="file-list-item__name" id="list-item-2">document5678.pdf</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Move one up">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="18 15 12 9 6 15"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Move one down">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Remove">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
            </li>
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <img class="file-list-item__thumbnail" src="https://picsum.photos/81/81" alt=""/>
                    <span class="file-list-item__name" id="list-item-3">image5678.png</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Move one up">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="18 15 12 9 6 15"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Move one down" disabled="disabled">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Remove">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </button>
                </div>
            </li>
        </ul>
    </div>
</div>