.ads-FileUpload {
  @apply flex
    items-center
    relative
    z-10;

  width: fit-content;
}

.ads-FileUpload--active::before {
  @apply border
    rounded
    absolute
    border-dashed
    bg-gray-100
    z-0;

  height: calc(100% + theme("height.4"));
  left: calc(0px - theme("width.2"));
  top: calc(0px - theme("height.2"));
  width: calc(100% + theme("width.4"));
  content: "";
}

.ads-FileUpload-input {
  @apply visually-hidden;
}

.ads-FileUpload-input:focus + .ads-FileUpload-button,
.ads-FileUpload-input:active + .ads-FileUpload-button {
  @apply shadow-focus;
}

.ads-FileUpload-button {
  @apply flex-shrink-0
    cursor-pointer;
}

.ads-FileUpload-fileLabel,
.ads-FileUpload-error {
  @apply text-h5
    font-medium
    ml-2;
}

.ads-FileUpload-fileLabel {
  @apply text-gray-700;
}

.ads-FileUpload-error {
  @apply text-failure;
}

.ads-FileUpload-truncate {
  @apply z-10;
}