/**
 * File-upload
 * @define file-upload
 */

@use 'sass:map';
@use '@ecl/vanilla-utility-screen-reader/screen-reader';

// Exposed variables
$theme: null !default;
$file-upload: null !default;

.ecl-file-upload:not(.no-js .ecl-file-upload) {
  @include screen-reader.sr-only;
}

.ecl-file-upload__button-container {
  display: flex;
  margin-top: var(--s-xs);
  width: fit-content;

  .no-js & {
    display: none;
  }
}

.ecl-file-upload__list {
  color: var(--c-d);
  font: var(--f-m);
  list-style: none;
  margin-bottom: 0;
  margin-top: var(--s-m);
  max-width: var(--max-w);
  padding-inline-start: 0;
  width: 100%;

  .no-js &,
  &:empty {
    display: none;
  }
}

.ecl-file-upload__item {
  border-top: 1px solid map.get($file-upload, 'separator-color');
  margin: 0;
  padding-bottom: var(--s-s);
  padding-top: var(--s-s);

  .ecl-file-upload__item-meta {
    color: map.get($file-upload, 'meta-color');
    display: inline-block;
  }

  &:last-child {
    padding-bottom: 0;
  }
}

.ecl-file-upload__item-name {
  display: inline-block;
}

.ecl-file-upload:focus-visible
  + .ecl-file-upload__button-container
  .ecl-file-upload__button {
  outline: 1px solid map.get($theme, 'color', 'white');
  outline-offset: -3px;
}
