@import (reference) url('./ImageEditor.less');

.FileInput {
  cursor: pointer;
  display: inline-flex;
  margin-right: var(--gap-s);
  max-width: 100%;
  position: relative;
  vertical-align: top;

  input[type='file'] {
    border: 0;
    bottom: 0;
    cursor: pointer;
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &::before {
    .Button;

    content: 'Choose';
  }

  &:hover,
  &:focus-within {
    &::before {
      .Button.is-focused;
    }
  }

  &[data-choose]::before {
    content: attr(data-choose);
  }

  &[data-placeholder]::before {
    content: attr(data-placeholder);
  }

  &[data-value] {
    &::before {
      .Icon;

      background: var(--color-black);
      border-color: var(--color-black);
      color: var(--color-white);
      content: 'swap_horiz';
    }

    &::after {
      content: attr(data-value);
      display: inline-block;
      overflow: hidden;
      padding: var(--gap-s);
      text-overflow: ellipsis;
      vertical-align: top;
      white-space: nowrap;
    }
  }
}

// Legacy.
.fileSelectorItem {
  display: block;
  margin-top: var(--gap-s);

  &.is-error {
    min-height: 0;

    > .Message {
      width: 100%;
    }

    > *:not(.Message) {
      display: none !important;
    }
  }
}

.file-selector-com-psddev-cms-ui-form-field-NewUploadFileFormInputAction {
  display: inline;
  margin: 0 0 0 var(--gap-s);
}

.bulkFileSelector {
  display: block;
}

.uploadableFile {
  align-items: center;
  background: rgb(var(--rgb-dominant3) / 70%);
  border: 4px dotted var(--color-dominant5);
  border-radius: var(--gap-m);
  display: flex;
  justify-content: center;
  padding: var(--gap-m);
  user-select: none;

  &.is-active {
    border-style: solid;
  }

  a {
    .Link.is-black;
    .Text.is-xl;

    --Link-hoverDecoration: none;

    display: block;

    &::before {
      .Icon;
      .Icon.is-l;

      content: 'arrow_upward';
      margin-right: var(--gap-xs);
    }
  }
}

.upload-preview {
  .ImageEditor-preview;

  --RPB-size: 100px;

  display: inline-block;
  margin-top: var(--gap-s);
  vertical-align: middle;

  .RPB,
  .upload-percentage {
    display: none;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .RPB {
    background: var(--color-white);
    border-radius: 50%;
  }

  &.loading {
    min-height: 100px;
    min-width: 100px;

    img {
      opacity: 0.2;
    }

    .RPB,
    .upload-percentage {
      display: block;
    }
  }
}

.bulk-upload-files > .inputLarge .upload-preview.error,
.upload-preview.error {
  display: none;
}

.bulk-upload-files {
  margin-bottom: calc(var(--gap-l) * 2);

  > .inputLabel {
    display: none;
  }

  > .inputLarge {
    margin-top: var(--gap-s);
    overflow: auto;
    white-space: nowrap;

    .upload-preview {
      display: inline-flex;
      margin-right: var(--gap-s);

      img {
        flex: auto;
        object-fit: cover;
      }

      .upload-preview-label {
        display: none;
      }
    }
  }
}
