/* Hover styling */ @media (hover: hover) { .copy-email-button:hover .copy-email-icon__wrap{ background: rgba(16, 16, 16, 0.5); } .copy-email-button:hover .copy-email-text__el{ transform: translate(0px, -100%); } } /* Keyboard focus styling */ .copy-email-button:focus .copy-email-icon__wrap{ background: rgba(16, 16, 16, 0.5); } .copy-email-button:focus .copy-email-text__el { transform: translate(0px, -100%); } /* 'Copied' state, when a user has clicked the button */ [data-copy-button="copied"] .copy-email-icon__wrap{ background: #222222 !important; } [data-copy-button="copied"] .copy-email-text__el{ transform: translate(0px, -200%) !important; }