/* 
Questo file serve a modificare il layout dei form di upload delle immagini, 
che sono scritti in js principalmente, quindi andiamo a usare questo trucco 
*/



/* modifichiamo il pulsante di "Carica" */
.node-lavorazione-form .field--name-field-photos .image-widget label[for^="edit-field-photos-"],
.node-lavorazione-edit-form .field--name-field-photos .image-widget label[for^="edit-field-photos-"]
{
    display: inline;
    border-radius: 68px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-shrink: 0;

    background-color: var(--carchivio-color-button-accent);
    color: var(--carchivio-color-button-accent-text);
    height: 32px;

    font-size: 16px;
    line-height: 23px;
}

/* Modifichiamo il pulsante di elimina */
.node-lavorazione-form .field--name-field-photos input[data-drupal-selector$="-remove-button"],
.node-lavorazione-edit-form .field--name-field-photos input[data-drupal-selector$="-remove-button"] 
{
    display: inline-block;
    border-radius: 68px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-shrink: 0;

    background-color: transparent;
    color: var(--carchivio-font-color-red);
    height: 29px;
    box-sizing: border-box;

    font-size: 16px;
    line-height: 23px;
}

.node-lavorazione-form .field--name-field-photos .js-form-item small.description, /* rimuoviamo i dettagli sul tipo e size delle immagini da caricare */
.node-lavorazione-form .field--name-field-photos .image-widget label[for^="edit-field-photos-"] svg, /* rimuoviamo il simbolo svg per l'upload*/
.node-lavorazione-form .field--name-field-photos .tabledrag-toggle-weight,
.node-lavorazione-form .field--name-field-photos div[data-drupal-selector$="-filename"] .card-title span,
.node-lavorazione-form .field--name-field-photos div[data-drupal-selector$="-filename"] .card-title svg,
.node-lavorazione-form .field--name-field-photos div[data-drupal-selector$="-filename"] /* pulsante per aprire l'immagine caricata*/,
.node-lavorazione-edit-form .field--name-field-photos .js-form-item small.description,
.node-lavorazione-edit-form .field--name-field-photos .image-widget label[for^="edit-field-photos-"] svg,
.node-lavorazione-edit-form .field--name-field-photos .tabledrag-toggle-weight,
.node-lavorazione-edit-form .field--name-field-photos div[data-drupal-selector$="-filename"] .card-title span,
.node-lavorazione-edit-form .field--name-field-photos div[data-drupal-selector$="-filename"] .card-title svg,
.node-lavorazione-edit-form .field--name-field-photos div[data-drupal-selector$="-filename"]
{
    display: none !important;
}




@media (max-width: 768px) 
{

    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > thead 
    {
        display: none;
    }

    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table,
    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody,
    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr 
    {
        display: block;
        width: 100%;
        max-width: 500px;
    }

    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr 
    {
        border: 1px solid #A3BAD1;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr > td 
    {
        display: block;
        width: 100%;
        padding: 0;
        border: none; /* Remove any default cell borders */
        margin-bottom: 1.25rem; /* Space between the stacked elements */
    }


    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr > td:nth-child(1) 
    {
        text-align: center;
    }
    

    .node-lavorazione-form .field--name-field-photos .image-widget img 
    {
        width: 100%;
        height: auto;
        max-width: 300px; /* Don't let it get *too* big */
        margin-bottom: 1rem;
    }


    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr > td:nth-child(2) 
    {
        display: none;
    }


    .node-lavorazione-form .field--name-field-photos table#edit-field-photos-table > tbody > tr > td:nth-child(3) 
    {
        text-align: right;
        margin-bottom: 0; 
    }

}