@layer env.components {
  .env-drop-zone {
    --env-drop-zone-border: var(--env-color-border-default);
    min-inline-size: 0;
  }
  .env-drop-zone[hidden] {
    display: none;
  }
  .env-drop-zone-target {
    box-sizing: border-box;
    justify-items: center;
    align-content: center;
    inline-size: 100%;
    --env-drop-zone-min-height: 9rem;
    min-block-size: var(--env-drop-zone-min-height);
    margin: 0;
    padding: var(--env-space-5) var(--env-space-4);
    border: 2px dashed var(--env-drop-zone-border);
    border-radius: var(--env-radius-lg);
    background: transparent;
    color: var(--env-color-fg-default);
    font: var(--env-type-body);
    text-align: center;
    overflow-wrap: break-word;
    cursor: pointer;
    transition:
      border-color var(--env-motion-duration-medium) var(--env-motion-ease-enter),
      background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-drop-zone-icon {
    --env-drop-zone-icon-well: 2.75rem;
    display: grid;
    place-items: center;
    inline-size: var(--env-drop-zone-icon-well);
    block-size: var(--env-drop-zone-icon-well);
    border-radius: 50%;
    background: var(--env-color-bg-neutral-muted);
    color: var(--env-color-fg-muted);
    transition: color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-drop-zone-icon > .env-icon {
    --env-icon-size: 1.5rem;
  }
  .env-drop-zone-label {
    font-weight: var(--env-font-weight-medium);
  }
  .env-drop-zone-description {
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
  }
  @media (hover: hover) {
    .env-drop-zone-target:hover:not(:disabled, [aria-disabled='true']) {
      --env-drop-zone-border: var(--env-color-border-primary-emphasis-hover);
      background: var(--env-color-bg-neutral-subtle-hover);
    }
  }
  .env-drop-zone-target:active:not(:disabled, [aria-disabled='true']) {
    background: var(--env-color-bg-neutral-subtle-pressed);
  }
  .env-drop-zone-target:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  .env-drop-zone[data-drag-over] .env-drop-zone-target {
    --env-drop-zone-border: var(--env-color-border-primary-emphasis);
    border-style: solid;
    background: var(--env-color-bg-selected);
  }
  .env-drop-zone[data-drag-over] .env-drop-zone-icon {
    color: var(--env-color-border-primary-emphasis);
  }
  .env-drop-zone[data-invalid] .env-drop-zone-target {
    --env-drop-zone-border: var(--env-color-fg-danger);
  }
  .env-drop-zone[data-pending] .env-drop-zone-target {
    cursor: progress;
  }
  .env-drop-zone-target:disabled {
    opacity: var(--env-state-disabled-opacity);
    cursor: default;
  }
  .env-drop-zone[data-size='sm'] .env-drop-zone-target {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    min-block-size: calc(var(--env-control-height) + var(--env-space-4));
    padding: var(--env-space-2) var(--env-space-4);
    text-align: start;
  }
  .env-drop-zone[data-size='sm'] .env-drop-zone-icon {
    --env-drop-zone-icon-well: 2rem;
  }
  .env-drop-zone[data-size='sm'] .env-drop-zone-icon > .env-icon {
    inline-size: var(--env-control-icon-size);
    block-size: var(--env-control-icon-size);
  }
  .env-drop-zone[data-size='sm'] .env-drop-zone-label {
    font: var(--env-type-body-sm);
    font-weight: var(--env-font-weight-medium);
  }
  @media (prefers-reduced-motion: reduce) {
    .env-drop-zone-target,
    .env-drop-zone-icon {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .env-drop-zone[data-drag-over] .env-drop-zone-target {
      border-color: Highlight;
    }
  }
}