.govuk-document-field {
  display: grid;
  grid-template-areas:
    "label"
    "hint"
    "error"
    "preview"
    "file"
    "supplemental";
  grid-template-columns: auto;
  grid-auto-rows: auto;

  label {
    grid-area: label;
  }

  .govuk-hint {
    grid-area: hint;
  }

  .govuk-error-message {
    grid-area: error;
  }

  input {
    grid-area: file;

    &::file-selector-button {
      color: var(--color-dark);
      background: var(--color-tint);
      border: var(--stroke-input);
      border-radius: var(--input-radius);
    }
  }

  .preview-file {
    grid-area: preview;
    position: relative;
    overflow: visible;
    background-color: var(--color-tint);
    border: var(--stroke-input);
    border-radius: var(--input-radius);
    margin-bottom: var(--space-2xs);
    padding: var(--space-3xs);
    line-height: var(--leading-standard);
    align-items: start;
    margin-right: auto;

    &:not([hidden]) {
      display: inline-flex;
    }

    .preview-filename {
      line-height: unset;
    }

    .file-destroy {
      appearance: none;
      color: black;
      border: none;
      background: none;
      display: inline-block;
      margin-left: 0.2rem;
      padding: 0;

      &::after {
        content: "×";
        display: block;
        position: relative;
        width: 21px;
        line-height: 21px;
        font-size: 21px;
      }
    }
  }

  > div:last-child {
    grid-area: supplemental;

    > * + * {
      margin-top: var(--flow-space, var(--space-2xs));
    }
  }
}