/* File field of the design system (/design-system#file_field). The people import was the first screen to use it. */
.ds-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  min-inline-size: 0;
}

.ds-file__pick {
  position: relative;
  flex-shrink: 0;

  &:has(.ds-file__input:focus-visible) {
    outline: 2px solid var(--ds-focus-ring);
    outline-offset: 0;
  }
}

/* The real input covers the button, so a click, a drop and the keyboard all reach it. */
.ds-file__input {
  --hover-size: 0;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.ds-file__name {
  min-inline-size: 0;
  color: var(--ds-text-secondary);
  font-size: var(--ds-font-size-compact);
  overflow-wrap: anywhere;

  &.is-chosen {
    color: var(--ds-text);
    font-weight: var(--ds-weight-medium);
  }
}

/* A choice past the field's limits is refused in words where the name goes, in the error's red. */
.ds-file.is-refused .ds-file__name { color: var(--ds-negative); }

.ds-file:has(.ds-file__input:disabled) .ds-file__pick {
  color: var(--ds-text-muted);
  cursor: not-allowed;
}

.ds-file__input:disabled { cursor: not-allowed; }