@layer components {
  .drop-zone {
    transition: all 0.2s ease-in-out;
    border-radius: 8px;

    &.drag-over {
      background-color: oklch(var(--lch-blue-dark) / 10%);
      border: 2px dashed var(--color-link);
      transform: scale(1.02);

      &::before {
        content: "Drop files here to upload";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        background: oklch(var(--lch-blue-dark) / 90%);
        color: var(--color-ink-inverted);
        padding: 12px 24px;
        border-radius: 6px;
        font-weight: 500;
        z-index: var(--z-dropdown);
        pointer-events: none;
      }
    }
  }

  .image-item {
    background: var(--color-ink-lightest);
    border: 1px solid oklch(var(--lch-black) / 8%);
    border-radius: var(--radius);
  }

  .image-thumbnail img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius);
  }

  .document-item {
    background: var(--color-ink-lightest);
    border: 1px solid oklch(var(--lch-black) / 8%);
    border-radius: var(--radius);
  }
}