.dropZone {
    --dz-fill: transparent;
    --dz-stroke: transparent;
    --dz-inset: -1px;
    --dz-radius: var(--radius);
    --dz-height: calc(100% + 2px);
    --dz-width: calc(100% + 2px);

    &:has(.dropZoneContent > .avatar) {
        --dz-inset: -3px;
        --dz-radius: 999px;
        --dz-height: calc(100% + 6px);
        --dz-width: calc(100% + 6px);
    }

    &:has(.dropZoneContent > .placeholder) {
        --dz-fill: var(--gray-50);
        --dz-stroke: var(--gray-200);
    }
}

.dropZone {
    position: relative;
    display: grid;
    align-items: center;
    gap: 15px 30px;
    grid-template-columns: 1fr;

    &:has(> .dropZoneActions) {
        grid-template-columns: auto 1fr;
    }
}

.dropZoneActions {
    display: flex;
    flex-flow: column;
    gap: 15px;
}

.dropZoneBorder {
    position: absolute;
    inset: var(--dz-inset);
    height: var(--dz-height);
    width: var(--dz-width);
    max-width: unset;
    overflow: visible;
    pointer-events: none;

    :global(rect) {
        fill: var(--dz-fill);
        rx: var(--dz-radius);
        stroke: var(--dz-stroke);
        stroke-dasharray: 6px 6px;
        stroke-width: 2px;
        transition: 270ms var(--swift-out);
        transition-property: fill, stroke;
    }
}

.dropZoneContent {
    position: relative;

    > :local(.avatar) {
        display: block;
    }

    > :local(.placeholder) {
        background: transparent;
        border: 0;
    }
}

.dropZone.isDragging .dropZoneContent {
    --dz-stroke: var(--primary-600);
}

.dropZone.isDraggingOver .dropZoneContent {
    &:has(.placeholder) {
        --dz-fill: var(--primary-100);
    }

    .dropZoneBorder rect {
        animation: dropZoneBorderAnimation 480ms linear infinite both;
    }
}

.dropZoneLoader {
    position: absolute;
    display: flex;
    inset: var(--dz-inset);
    align-items: center;
    justify-content: center;
    background: rgb(from var(--gray-50) r g b / .84);
    backdrop-filter: blur(3px) saturate(180%);
    border-radius: var(--dz-radius);
    z-index: 100;
}

@keyframes dropZoneBorderAnimation {
    to {
        stroke-dashoffset: -12px;
    }
}