/* Base layout */
.mdp-wrap { display:inline-flex; align-items:center; gap:0; transition: color .25s ease; }
.mdp-wrap .mdp-icon { position:relative; display:inline-block; line-height:0; }
.mdp-wrap .mdp-text { display:inline-block; }

/* Two-layer icon for hover swap */
.mdp-icon img { display:block; width:100%; height:100%; position:absolute; left:0; top:0; transition: opacity .25s ease, transform .25s ease; }
.mdp-icon .mdp-icon-base { opacity: 1; position:absolute; }
.mdp-icon .mdp-icon-hover { opacity: 0; position:absolute; }

/* Positioning */
.mdp-pos-left  { flex-direction: row; }
.mdp-pos-right { flex-direction: row-reverse; }
.mdp-pos-above { flex-direction: column; align-items:center; text-align:center; }
.mdp-pos-below { flex-direction: column-reverse; align-items:center; text-align:center; }

/* Shared hover text color */
@media (hover:hover) {
  a:hover .mdp-wrap { color: var(--mdp-hover-color, inherit); }
}

/* Effects gating: only apply on devices that actually hover or not */
@media (hover:hover) {
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-underline .mdp-text { text-decoration: underline; }
  a .mdp-wrap.mdp-eff-desktop.mdp-eff-scale .mdp-icon { transition: transform .25s ease; }
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-scale .mdp-icon { transform: scale(1.1); }
  a .mdp-wrap.mdp-eff-desktop.mdp-eff-rotate .mdp-icon { transition: transform .25s ease; }
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-rotate .mdp-icon { transform: rotate(10deg); }
  a .mdp-wrap.mdp-eff-desktop.mdp-eff-opacity .mdp-icon .mdp-icon-base { opacity: 1; }
  a .mdp-wrap.mdp-eff-desktop.mdp-eff-opacity .mdp-icon .mdp-icon-hover { opacity: 0; }
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-opacity .mdp-icon .mdp-icon-base { opacity: 0; }
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-opacity .mdp-icon .mdp-icon-hover { opacity: 1; }
  /* Pulse */
  @keyframes mdp-pulse { 0%{ transform: scale(1); } 50%{ transform: scale(1.08); } 100%{ transform: scale(1); } }
  a:hover .mdp-wrap.mdp-eff-desktop.mdp-eff-pulse .mdp-icon { animation: mdp-pulse .8s ease-in-out infinite; }
}

/* Mobile (no hover): allow effects if explizit gewünscht */
@media (hover:none) {
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-underline .mdp-text { text-decoration: underline; }
  a .mdp-wrap.mdp-eff-mobile.mdp-eff-scale .mdp-icon { transition: transform .2s ease; }
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-scale .mdp-icon { transform: scale(1.06); }
  a .mdp-wrap.mdp-eff-mobile.mdp-eff-rotate .mdp-icon { transition: transform .2s ease; }
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-rotate .mdp-icon { transform: rotate(8deg); }
  a .mdp-wrap.mdp-eff-mobile.mdp-eff-opacity .mdp-icon .mdp-icon-base { opacity: 1; }
  a .mdp-wrap.mdp-eff-mobile.mdp-eff-opacity .mdp-icon .mdp-icon-hover { opacity: 0; }
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-opacity .mdp-icon .mdp-icon-base { opacity: 0; }
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-opacity .mdp-icon .mdp-icon-hover { opacity: 1; }
  /* Pulse auf Tap */
  @keyframes mdp-pulse { 0%{ transform: scale(1); } 50%{ transform: scale(1.06); } 100%{ transform: scale(1); } }
  a:active .mdp-wrap.mdp-eff-mobile.mdp-eff-pulse .mdp-icon { animation: mdp-pulse .8s ease-in-out 1; }
}

/* If hover icon provided but effect is not 'opacity', still subtly swap on hover-enabled devices */
@media (hover:hover) {
  a:hover .mdp-wrap .mdp-icon .mdp-icon-hover { opacity: 1; }
}