/* Scoped styles for NxImageUploader component */
.nx-imageuploader-root {
    display: block;
    margin: 8px 0;
    grid-column: -1 / 1;
    background: var(--nx-tertiary-bg);
    border-radius: var(--nx-border-radius);
    padding: var(--nx-space);
}


/* status text */
.nx-imageuploader-status {
    color: var(--nx-muted-fg, #666);
    font-size: 0.9rem;
    display:block;
    text-align:center;
}



/* file button styling - visually a single button */
.nx-file-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nx-hilight-bg);

    padding: var(--nx-space-small);
    border-radius: var(--nx-border-radius);
    cursor: pointer;

    border: none;
    box-shadow: var(--nx-box-shadow);
    position: relative;
    overflow: hidden;
  
}




/* hide the native file input but keep it interactive */
.nx-file-button input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
}



/* list */
.nx-imageuploader-list {
    display: flex;
    gap: var(--nx-space-small);
    overflow-x: auto;
    padding: var(--nx-space-small);
    background: var(--nx-primary-bg);
    border-radius: var(--nx-border-radius);
}



.nx-imageuploader-item {

    border-radius: var(--nx-border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: var(--nx-box-shadow);
}



    .nx-imageuploader-item a {
        margin: 0px;
        box-shadow: none;
        padding:0px;
    }



.nx-imageuploader-thumb {
    width: 150px;
    height:150px;
    object-fit: cover;
    margin: 0px;
    border-radius: var(--nx-border-radius);
}

.nx-imageuploader-item-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
}

/* overlay delete button */
.nx-imageuploader-delete {
    font-size: 0.85rem;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: none;
   

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color:var(--nx-negative-fg);

    margin:0px;
}

    /* hover */
    .nx-imageuploader-delete:hover,
    .nx-file-button:hover {
        filter: brightness(0.95);
    }


.nx-imageuploader-empty {
    flex: 1;
    text-align: center;
}