/* Standard comune dei controlli interattivi del frontend utente. */
.fp-ui-control{
  --fp-ui-control-glow:currentColor;
  box-shadow:
    inset 0 .12cqw .18cqw rgba(255,255,255,.22),
    inset 0 -.22cqw .28cqw rgba(0,0,0,.28),
    0 .30cqw .58cqw rgba(0,0,0,.34);
  transition:
    translate 70ms ease,
    filter 90ms ease,
    box-shadow 90ms ease;
}

@media (hover:hover) and (pointer:fine){
  .fp-ui-control:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):hover{
    filter:
      brightness(1.08)
      saturate(1.06)
      drop-shadow(0 0 .50cqw color-mix(in srgb,var(--fp-ui-control-glow) 28%,transparent)) !important;
  }
}

.fp-ui-control:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(.is-disabled):active{
  translate:0 .18cqw;
  filter:brightness(1.11) saturate(1.04) !important;
  box-shadow:
    inset 0 .08cqw .16cqw rgba(255,255,255,.24),
    inset 0 -.08cqw .16cqw rgba(0,0,0,.22),
    0 .10cqw .24cqw rgba(0,0,0,.30) !important;
}

/* I disabled conservano il rilievo statico, senza feedback di hover o pressione. */
.fp-ui-control:disabled,
.fp-ui-control[aria-disabled="true"],
.fp-ui-control.disabled,
.fp-ui-control.is-disabled{
  translate:none;
}

@media (prefers-reduced-motion:reduce){
  .fp-ui-control{transition:none}
}