@layer components {
  #invoice-import el-dialog-panel {
    width: min(100%, calc(var(--baseline) * 56));

    /* Mini sheet: toolbar strip on top, padded content below. */
    & > form > .content {
      padding: var(--spacing-md);
    }

    fieldset {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;

      &:disabled {
        opacity: 0.5;
        cursor: progress;

        .import-dropzone {
          cursor: progress;
        }
      }
    }

    .toolbar > .actions > button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* ── Drop zone: the whole box is the file picker ─────────────────── */

  .import-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) var(--spacing-md);
    border: 1px dashed var(--control-border-color);
    border-radius: var(--radius-default);
    background: var(--background-tint-0);
    color: var(--link-color);
    text-align: center;
    cursor: pointer;

    &:hover,
    &[data-dragging] {
      border-color: var(--border-hover-color);
      background: var(--background-tint-1);
    }

    &:focus-within {
      outline: 2px solid var(--text-color);
      outline-offset: 1px;
    }

    & > svg {
      color: var(--accent-color);
      margin-block-end: var(--spacing-xs);
    }

    & > span + span {
      color: var(--muted-color);
      font-size: var(--font-size-sm);
    }

    /* Visually hidden but still focusable and clickable through the label. */
    & > input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
  }

  /* ── Chosen files ────────────────────────────────────────────────── */

  /* Lays its children out as part of the dialog content, so an empty list or
     a missing error leaves no gap behind. */
  .import-files {
    display: contents;

    & > .form-errors {
      margin: 0;

      & > p {
        margin: 0;
      }
    }

    & > ul {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      margin: 0;
      padding: 0;
      list-style: none;

      &:not(:has(li)) {
        display: none;
      }
    }
  }

  .import-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--radius-default);
    box-shadow: 0 0 0 1px var(--border-color);

    & > .import-file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Errors can run long: give them their own line under the name. */
    & > .import-file-status {
      grid-row: 2;
      grid-column: 1 / -1;
      color: var(--error-color);
      font-size: var(--font-size-sm);

      &:empty {
        display: none;
      }
    }

    & > .link {
      justify-content: center;
      min-width: calc(var(--font-size) + var(--baseline));

      &::before {
        inset-inline: 0;
      }
    }

    &[data-state="failed"] {
      background: var(--error-background);
      box-shadow: 0 0 0 1px var(--error-border-color);
    }
  }
}