.icon{--icon-size: 1.8rem}.icon:before{content:"";display:block;width:var(--icon-size);height:var(--icon-size);background-color:var(--color-strong);-webkit-mask:var(--icon-url) center/contain no-repeat;mask:var(--icon-url) center/contain no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:background-color var(--duration-fast)}@media (hover: hover){.icon:is(a):hover:before{background-color:var(--color-secondary)}}.icon:is(a){--icon-min-size: 24px;display:flex;width:max(var(--icon-size),var(--icon-min-size));height:max(var(--icon-size),var(--icon-min-size));margin:calc(min(0px,var(--icon-size) - var(--icon-min-size))/2);transition:color var(--duration-fast)}.icon:is(a):before{margin:auto}