/* Samma känsla på alla knappar: de trycks ner lite när man trycker, och med mus ändras de när man pekar.
   Stora knappar som redan har en egen effekt (Filtrera, huvudknappar, hjärtat) står i sina egna filer. */
.chip,
.textknapp,
.genvag,
.start-alla,
.bladdra-pil,
.fot-knapp,
.menade-ord,
.redan-med,
.flode-flik,
.mejlkort,
.ruta,
.kort,
.bildval-bild,
.veckoval-ruta > span { transition: transform 120ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }

.chip:active,
.textknapp:active,
.genvag:active,
.start-alla:active,
.bladdra-pil:active,
.fot-knapp:active,
.menade-ord:active,
.redan-med:active,
.flode-flik:active,
.veckoval-ruta:active > span,
.bildval-ruta:active .bildval-bild { transform: scale(0.96); }

/* Stora ytor trycks ner mindre, så att de inte ser ut att krympa. Kortet bara när man trycker på själva kortet, inte på hjärtat. */
.mejlkort:active,
.ruta:active,
.kort:has(.kort-oppna:active) { transform: scale(0.985); }

@media (hover: hover) {
  .chip:not([aria-pressed="true"]):hover,
  .bladdra-pil:hover,
  .flode-flik:not([aria-pressed="true"]):hover { background-color: #f1f2f3; }
}

/* Typvalet högst upp och markören i flödets flikar: den valda får samma färg som rutan på startsidan. */
.typval-gele { transition: background-color 300ms ease-out; }

.typval[data-val="0"] .typval-gele,
.flode-markor[data-typ="prao"] .flode-gele { background: #dde8f1; }

.typval[data-val="1"] .typval-gele,
.flode-markor[data-typ="extrajobb"] .flode-gele { background: #fbe2c5; }

.typval[data-val="2"] .typval-gele,
.flode-markor[data-typ="alla"] .flode-gele { background: #e1ebd6; }

/* Tar emot nu: grönt när det är valt, som ett "öppet". */
.chip-nu[aria-pressed="true"] { background: #e1ebd6; border-color: #4f7f43; color: var(--text); }

/* Sparade och sparade hjärtan: rött, som ett gillat hjärta. */
.chip-sparade[aria-pressed="true"] { background: #fde3e2; border-color: #d6453e; color: var(--text); }

.chip-sparade[aria-pressed="true"] svg { fill: #d6453e; stroke: #d6453e; }

.hjarta[aria-pressed="true"] svg,
.flode-gilla[aria-pressed="true"] svg { fill: #e5484d; stroke: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .chip:active,
  .textknapp:active,
  .genvag:active,
  .start-alla:active,
  .bladdra-pil:active,
  .fot-knapp:active,
  .menade-ord:active,
  .redan-med:active,
  .flode-flik:active,
  .mejlkort:active,
  .ruta:active,
  .kort:has(.kort-oppna:active),
  .veckoval-ruta:active > span,
  .bildval-ruta:active .bildval-bild { transform: none; }
}