file-uploader {
  display: grid;
  grid-gap: var(--gutter0);
}
file-uploader > label {
  font-size: 0.8em;
  font-weight: 700;
  grid-row: var(--inputs-label-row);
}
file-uploader.has-items:not([multiple]) input-field {
  display: none;
}
file-uploader.reordering input-field {
  pointer-events: none;
}
file-uploader .list {
  list-style-type: none;
  display: grid;
  grid-gap: var(--gutter0);
}
file-uploader .list:empty {
  display: none;
}
file-uploader .list li {
  position: relative;
}
file-uploader .list li.loading::after {
  content: "";
  pointer-events: none;
  display: inline-block;
  min-width: var(--preloader-width, var(--preloader-size, 1.2em));
  width: var(--preloader-width, var(--preloader-size, 1.2em));
  min-height: var(--preloader-height, var(--preloader-size, 1.2em));
  height: var(--preloader-height, var(--preloader-size, 1.2em));
  border-radius: 50%;
  border-width: 3px;
  background-color: var(--preloader-background-colour, initial);
  border: max(3px, 0.2em) solid var(--preloader-border-colour, #dddddd);
  border-top-color: var(--preloader-colour, #ff2871);
  animation: spin 1s linear infinite;
  position: absolute;
  top: calc(50% - var(--preloader-height, var(--preloader-size, 1.2em)) / 2);
  left: calc(50% - var(--preloader-width, var(--preloader-size, 1.2em)) / 2);
}
file-uploader .list li.loading button.delete {
  pointer-events: none;
}
file-uploader .list.list-type-images {
  grid-template-columns: repeat(auto-fill, 100px);
}
file-uploader .list.list-type-images li {
  --aspect-ratio: 1/1;
  aspect-ratio: var(--aspect-ratio);
}
@supports not (aspect-ratio: 1/1) {
  file-uploader .list.list-type-images li {
    aspect-ratio: initial;
  }
  file-uploader .list.list-type-images li::before {
    content: "";
    float: left;
    height: 0;
    padding-top: calc(1 / 1 * 100%);
  }
}
file-uploader .list.list-type-images li {
  display: flex;
  --preloader-border-colour: white;
  border-radius: calc(var(--border-radius) / 2);
  border: 1px solid #dddddd;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
file-uploader .list.list-type-images li:hover {
  cursor: grab;
  border-color: var(--primary, #ff2871);
}
file-uploader .list.list-type-images li:active {
  cursor: grabbing;
  border-color: #0F72C0;
  transform: scale(0.94);
}
file-uploader .list.list-type-images li.reorder-left::before, file-uploader .list.list-type-images li.reorder-right::before {
  position: absolute;
  content: "";
  height: 100%;
  opacity: 0.5;
}
file-uploader .list.list-type-images li.reorder-left::before {
  border-left: 3px #0F72C0 solid;
  border-right: unset;
  left: -6px;
  right: unset;
}
file-uploader .list.list-type-images li.reorder-right::before {
  border-left: unset;
  border-right: 3px #0F72C0 solid;
  left: unset;
  right: -6px;
}
file-uploader .list.list-type-images li button.delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  place-items: center;
  place-content: center;
  color: white;
  border-radius: 50%;
  transition: background-color var(--transition);
  background-color: #ff2871;
}
file-uploader .list.list-type-images li button.delete span {
  display: none;
}
file-uploader .list.list-type-images li picture.image {
  display: block;
  transition: var(--transition);
  width: 100%;
  border-radius: inherit;
}
file-uploader .list.list-type-images li.loading button.delete {
  background-color: #dddddd;
}
file-uploader .list.list-type-images li.loading img {
  opacity: 0.3;
  filter: grayscale(1);
}
.js-has-pseudo [csstools-has-2u-2x-30-2t-19-39-34-30-33-2p-2s-2t-36-w-1a-30-2x-37-38-1m-2w-2p-37-14-1m-32-33-38-14-30-2x-1m-32-38-2w-19-33-2u-19-38-3d-34-2t-14-1e-15-15-15-w-30-2x-1m-2p-2r-38-2x-3a-2t]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) {
  border-color: #dddddd;
  transform: initial;
}
file-uploader .list:has(:not(li:nth-of-type(2))) li:active {
  border-color: #dddddd;
  transform: initial;
}
@media (hover: hover) {
  .js-has-pseudo [csstools-has-2u-2x-30-2t-19-39-34-30-33-2p-2s-2t-36-w-1a-30-2x-37-38-1m-2w-2p-37-14-1m-32-33-38-14-30-2x-1m-32-38-2w-19-33-2u-19-38-3d-34-2t-14-1e-15-15-15-w-30-2x-1m-2w-33-3a-2t-36]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) {
    cursor: initial;
    border-color: #dddddd;
  }
  file-uploader .list:has(:not(li:nth-of-type(2))) li:hover {
    cursor: initial;
    border-color: #dddddd;
  }
}
file-uploader .list.list-type-files li {
  display: grid;
  grid-gap: var(--gutter0);
  grid-auto-flow: column;
  grid-template-columns: min-content 1fr auto;
  align-items: center;
}
file-uploader .list.list-type-files li button.delete {
  font-size: 0.8em;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
file-uploader .list.list-type-files li button.delete svg {
  margin-left: 0.3em;
  color: #ff2871;
}
@media (hover: hover) {
  file-uploader .list.list-type-files li button.delete:hover {
    color: #ff2871;
  }
}
file-uploader .list.list-type-files li > svg {
  min-width: 1em;
  min-height: 1em;
}
file-uploader .list.list-type-files li + li {
  padding-top: var(--gutter0);
  border-top: 1px dashed #dddddd;
}
file-uploader .list.list-type-files li.loading > * {
  opacity: 0.3;
}
file-uploader .list.list-type-files li.loading::after {
  margin-top: calc(var(--gutter0) / 2);
}
/*# sourceMappingURL=../sourcemaps/components/file-uploader.css.map */