/* ============================================================
   GesTask — Pulsanti Prime
   Forma, gravità, varianti e stati di ogni pulsante.
   ============================================================

   Ogni variante di gravità imposta cinque variabili locali e nient'altro.
   È il motivo per cui il file resta corto pur coprendo sette gravità per
   quattro varianti: la forma è dichiarata una volta, il colore è un dato.
   Aggiungere una gravità significa aggiungere cinque righe, non un blocco. */

.p-button {
    --p-btn-bg:            var(--p-primary-color);
    --p-btn-color:         var(--p-primary-contrast-color);
    --p-btn-border:        var(--p-primary-color);
    --p-btn-hover-bg:      var(--p-primary-hover-color);
    --p-btn-hover-border:  var(--p-primary-hover-color);
    --p-btn-active-bg:     var(--p-primary-active-color);
    --p-btn-subtle-bg:     var(--p-primary-subtle-color);
    --p-btn-emphasis:      var(--p-primary-emphasis-color);
    --p-btn-ring:          var(--p-primary-color);

    /* Il colore che il contorno prende al passaggio del mouse.
       Vale `--p-btn-bg` per quasi tutte le gravità, dove lo sfondo è una
       tinta satura e accendere il bordo con quella è esattamente ciò che
       si vuole. È dichiarato a parte perché una gravità fa eccezione:
       `secondary` ha per sfondo una superficie chiara, e usarla come bordo
       lo renderebbe più chiaro di quello a riposo — il pulsante si
       spegnerebbe invece di accendersi. */
    --p-btn-edge:          var(--p-btn-bg);

    align-items: center;
    background: var(--p-btn-bg);
    border: 1px solid var(--p-btn-border);
    border-radius: var(--p-border-radius-lg);
    color: var(--p-btn-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--p-font-size);
    font-weight: 600;
    gap: .5rem;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    padding: .5rem .875rem;
    position: relative;
    text-decoration: none;
    transition:
        background-color var(--p-transition-duration),
        border-color var(--p-transition-duration),
        color var(--p-transition-duration),
        box-shadow var(--p-transition-duration),
        opacity var(--p-transition-duration);
    user-select: none;
    white-space: nowrap;
}

.p-button:hover {
    background: var(--p-btn-hover-bg);
    border-color: var(--p-btn-hover-border);
    color: var(--p-btn-color);
}

.p-button:active {
    background: var(--p-btn-active-bg);
    border-color: var(--p-btn-active-bg);
}

.p-button:focus-visible {
    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-btn-ring);
    outline-offset: var(--p-focus-ring-offset);
}

.p-button:disabled,
.p-button.p-disabled {
    cursor: default;
    opacity: .6;
    pointer-events: none;
}

.p-button-label {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p-button-icon {
    flex: 0 0 auto;
    line-height: 1;
}

/* ── Gravità ────────────────────────────────────────────────────── */

/* L'eccezione fra le gravità: le altre hanno per sfondo una tinta satura,
   questa una superficie. Le due variabili che nelle altre si ricavano dallo
   sfondo — il bordo acceso e il velo al passaggio del mouse — qui vanno
   prese un gradino più in là, o il contorno secondario al passaggio
   schiarisce invece di definirsi e il velo resta sotto la soglia del
   visibile su una scheda bianca. */
.p-button-secondary {
    --p-btn-bg: var(--p-secondary-color);
    --p-btn-color: var(--p-secondary-contrast-color);
    --p-btn-border: var(--p-secondary-border-color);
    --p-btn-hover-bg: var(--p-secondary-hover-color);
    --p-btn-hover-border: var(--p-secondary-hover-color);
    --p-btn-active-bg: var(--p-secondary-hover-color);
    --p-btn-subtle-bg: var(--p-secondary-color);
    --p-btn-emphasis: var(--p-secondary-emphasis-color);
    --p-btn-ring: var(--p-surface-400);
    --p-btn-edge: var(--p-surface-400);
}

.p-button-success {
    --p-btn-bg: var(--p-success-color);
    --p-btn-color: var(--p-success-contrast-color);
    --p-btn-border: var(--p-success-color);
    --p-btn-hover-bg: var(--p-success-hover-color);
    --p-btn-hover-border: var(--p-success-hover-color);
    --p-btn-active-bg: var(--p-success-hover-color);
    --p-btn-subtle-bg: var(--p-success-subtle-color);
    --p-btn-emphasis: var(--p-success-emphasis-color);
    --p-btn-ring: var(--p-success-color);
}

.p-button-info {
    --p-btn-bg: var(--p-info-color);
    --p-btn-color: var(--p-info-contrast-color);
    --p-btn-border: var(--p-info-color);
    --p-btn-hover-bg: var(--p-info-hover-color);
    --p-btn-hover-border: var(--p-info-hover-color);
    --p-btn-active-bg: var(--p-info-hover-color);
    --p-btn-subtle-bg: var(--p-info-subtle-color);
    --p-btn-emphasis: var(--p-info-emphasis-color);
    --p-btn-ring: var(--p-info-color);
}

.p-button-warn {
    --p-btn-bg: var(--p-warn-color);
    --p-btn-color: var(--p-warn-contrast-color);
    --p-btn-border: var(--p-warn-color);
    --p-btn-hover-bg: var(--p-warn-hover-color);
    --p-btn-hover-border: var(--p-warn-hover-color);
    --p-btn-active-bg: var(--p-warn-hover-color);
    --p-btn-subtle-bg: var(--p-warn-subtle-color);
    --p-btn-emphasis: var(--p-warn-emphasis-color);
    --p-btn-ring: var(--p-warn-color);
}

.p-button-danger {
    --p-btn-bg: var(--p-danger-color);
    --p-btn-color: var(--p-danger-contrast-color);
    --p-btn-border: var(--p-danger-color);
    --p-btn-hover-bg: var(--p-danger-hover-color);
    --p-btn-hover-border: var(--p-danger-hover-color);
    --p-btn-active-bg: var(--p-danger-hover-color);
    --p-btn-subtle-bg: var(--p-danger-subtle-color);
    --p-btn-emphasis: var(--p-danger-emphasis-color);
    --p-btn-ring: var(--p-danger-color);
}

.p-button-help {
    --p-btn-bg: var(--p-help-color);
    --p-btn-color: var(--p-help-contrast-color);
    --p-btn-border: var(--p-help-color);
    --p-btn-hover-bg: var(--p-help-hover-color);
    --p-btn-hover-border: var(--p-help-hover-color);
    --p-btn-active-bg: var(--p-help-hover-color);
    --p-btn-subtle-bg: var(--p-help-subtle-color);
    --p-btn-emphasis: var(--p-help-emphasis-color);
    --p-btn-ring: var(--p-help-color);
}

.p-button-contrast {
    --p-btn-bg: var(--p-contrast-color);
    --p-btn-color: var(--p-contrast-contrast-color);
    --p-btn-border: var(--p-contrast-color);
    --p-btn-hover-bg: var(--p-contrast-hover-color);
    --p-btn-hover-border: var(--p-contrast-hover-color);
    --p-btn-active-bg: var(--p-contrast-hover-color);
    --p-btn-subtle-bg: var(--p-surface-100);
    --p-btn-emphasis: var(--p-contrast-color);
    --p-btn-ring: var(--p-surface-500);
}

/* ── Varianti ───────────────────────────────────────────────────── */

/* Il contorno parte trasparente e si accende del proprio colore solo al
   passaggio: è la regola che rende leggibile una barra di dieci azioni,
   dove dieci contorni colorati competerebbero fra loro. */
.p-button-outlined {
    background: transparent;
    border-color: var(--p-content-border-color);
    color: var(--p-btn-emphasis);
}

.p-button-outlined:hover {
    background: var(--p-btn-subtle-bg);
    border-color: var(--p-btn-edge);
    color: var(--p-btn-emphasis);
}

.p-button-outlined:active {
    background: var(--p-btn-subtle-bg);
    border-color: var(--p-btn-edge);
}

.p-button-text {
    background: transparent;
    border-color: transparent;
    color: var(--p-btn-emphasis);
}

.p-button-text:hover {
    background: var(--p-btn-subtle-bg);
    border-color: transparent;
    color: var(--p-btn-emphasis);
}

.p-button-text:active {
    background: var(--p-btn-subtle-bg);
    border-color: transparent;
}

/* Il pulsante-collegamento non ha né fondo né cornice da accendere: resta
   il solo testo, sottolineato al passaggio come un collegamento vero. */
.p-button-link {
    background: transparent;
    border-color: transparent;
    color: var(--p-primary-color);
    padding-left: 0;
    padding-right: 0;
}

.p-button-link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--p-primary-hover-color);
    text-decoration: underline;
}

.p-button-raised {
    box-shadow: var(--p-shadow-sm);
}

.p-button-raised:hover {
    box-shadow: var(--p-shadow-md);
}

.p-button-rounded {
    border-radius: var(--p-border-radius-full);
}

/* ── Misure ─────────────────────────────────────────────────────── */

.p-button-sm {
    font-size: var(--p-font-size-sm);
    gap: .375rem;
    padding: .375rem .625rem;
}

.p-button-sm .p-button-icon { font-size: var(--p-icon-sm-size); }

.p-button-lg {
    font-size: 1.0625rem;
    gap: .625rem;
    padding: .6875rem 1.125rem;
}

.p-button-lg .p-button-icon { font-size: var(--p-icon-lg-size); }

/* Il pulsante di sola icona resta quadrato: senza larghezza minima pari
   all'altezza la spaziatura orizzontale lo allarga in un rettangolo. */
.p-button-icon-only {
    padding-left: 0;
    padding-right: 0;
    width: 2.375rem;
}

.p-button-icon-only.p-button-sm { width: 1.9375rem; }
.p-button-icon-only.p-button-lg { width: 2.9375rem; }
.p-button-icon-only .p-button-label {
    /* L'etichetta resta nel documento per i lettori di schermo, ma non
       occupa spazio: toglierla del tutto renderebbe muto il pulsante. */
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    clip-path: inset(50%);
}

.p-button-fluid {
    width: 100%;
}

/* ── Attesa ─────────────────────────────────────────────────────── */

/* Il pulsante in attesa resta visibile e smette di accettare clic: la
   stessa azione non deve poter partire due volte da un doppio clic. */
.p-button-loading {
    cursor: default;
    pointer-events: none;
}

.p-button-loading .p-button-icon {
    animation: p-spin 1s linear infinite;
}

.p-button-loading-icon {
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: inline-block;
    height: 1rem;
    width: 1rem;
}

/* ── Gruppi ─────────────────────────────────────────────────────── */

/* I pulsanti in gruppo condividono i bordi: il margine negativo evita la
   doppia linea di due cornici adiacenti. */
.p-buttongroup {
    display: inline-flex;
}

.p-buttongroup .p-button {
    border-radius: 0;
}

.p-buttongroup .p-button:not(:first-child) {
    margin-left: -1px;
}

.p-buttongroup .p-button:first-child {
    border-bottom-left-radius: var(--p-border-radius-lg);
    border-top-left-radius: var(--p-border-radius-lg);
}

.p-buttongroup .p-button:last-child {
    border-bottom-right-radius: var(--p-border-radius-lg);
    border-top-right-radius: var(--p-border-radius-lg);
}

/* Il pulsante attivo sale sopra i vicini, così il suo bordo acceso non
   viene coperto dal margine negativo di quello che segue. */
.p-buttongroup .p-button:hover,
.p-buttongroup .p-button:focus-visible,
.p-buttongroup .p-button.p-button-active {
    position: relative;
    z-index: 1;
}

/* La selezione singola dentro un gruppo: la usa chi cambia vista o densità
   di una lista, dove le opzioni sono poche e vanno viste tutte insieme. */
.p-selectbutton {
    background: var(--p-content-alt-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: var(--p-border-radius-lg);
    display: inline-flex;
    gap: .125rem;
    padding: .1875rem;
}

.p-selectbutton .p-button {
    background: transparent;
    border-color: transparent;
    border-radius: var(--p-border-radius-md);
    color: var(--p-text-muted-color);
    font-weight: 500;
    padding: .3125rem .625rem;
}

.p-selectbutton .p-button:hover {
    background: var(--p-content-hover-background);
    border-color: transparent;
    color: var(--p-text-color);
}

/* `.is-active` accanto alle altre due: è il nome che usa lo script della
   pagina delle bacheche per segnare la densità scelta, e riscriverlo lì
   avrebbe significato toccare un comportamento che funziona per una
   ragione puramente estetica. */
.p-selectbutton .p-button.p-button-active,
.p-selectbutton .p-button.is-active,
.p-selectbutton .p-button[aria-pressed='true'] {
    background: var(--p-content-background);
    border-color: transparent;
    box-shadow: var(--p-shadow-xs);
    color: var(--p-primary-color);
    font-weight: 600;
}