/* Une même matière pour les objets colorés posés sur le tableau. */
:root {
  --magnet-rest: inset 0 2px 1px rgb(255 255 255 / 45%), inset 0 -4px 2px rgb(0 0 0 / 19%), 2px 5px 8px rgb(0 0 0 / 42%);
  --magnet-lift: inset 0 2px 1px rgb(255 255 255 / 50%), inset 0 -4px 2px rgb(0 0 0 / 19%), 3px 7px 11px rgb(0 0 0 / 48%);
}

:is(.subject-link, .learning-label strong, .seed-object, .sentence-word:not(.is-empty), .word-chip, .word-slot.has-patch, .package, .magnet-object, .shop-interest-button) {
  background-image: linear-gradient(165deg, rgb(255 255 255 / 16%), transparent 42%, rgb(0 0 0 / 5%));
  box-shadow: var(--magnet-rest);
}

:is(.subject-link, .learning-label strong, .seed-bag, .seed-stock-one, .sentence-word:not(.is-empty), .word-chip, .word-slot.has-patch, .package, .shop-interest-button) {
  border-radius: 8px;
}

:is(.subject-link, .seed-object, .sentence-word:not(.is-empty), .word-chip, .word-slot.has-patch, .package, .magnet-object, .shop-interest-button):hover:not(:disabled) {
  box-shadow: var(--magnet-lift);
}

:is(.seed-ghost, .sentence-ghost, .word-ghost, .package-ghost, .magnet-object.is-dragging) {
  box-shadow: inset 0 2px 1px rgb(255 255 255 / 50%), inset 0 -4px 2px rgb(0 0 0 / 19%), 4px 12px 17px rgb(0 0 0 / 50%);
}

@media (forced-colors: active) {
  :is(.subject-link, .learning-label strong, .seed-object, .sentence-word:not(.is-empty), .word-chip, .word-slot.has-patch, .package, .magnet-object, .shop-interest-button) {
    background-image: none;
    box-shadow: none;
    outline: 1px solid ButtonText;
  }
}