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

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

  .drop-zone.drag-over::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-white);
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    z-index: var(--z-dropdown);
    pointer-events: none;
  }
}