@layer components{.icon-button{position:relative;display:inline-flex;justify-content:center;align-items:center;min-width:44px;min-height:44px;min-block-size:44px;min-inline-size:44px;padding:var(--space-2);background-color:var(--purple-700-hover);border:0;border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast)}@media (hover:hover) and (pointer:fine){.icon-button:hover{background-color:var(--purple-700-focus-ring)}}.icon-button:focus-visible{outline:3px solid var(--purple-500);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.icon-button .icon{transition:transform var(--transition-fast)}}}