@layer components{.category-icon-box{--category-icon-fill:var(--palette-white);--category-icon-duration:1.2s;--category-icon-ease:cubic-bezier(0.22,1,0.36,1);position:relative;z-index:1;display:flex;height:66px;width:67px;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background-color:var(--customer-card);border:1px solid var(--customer-card-border-color);box-shadow:var(--customer-card-elevation)}html.dark .theme-customer .category-icon-box--selected{border-color:var(--customer-card-selected-border-color);box-shadow:none}.category-icon-box:after,.category-icon-box:before{content:"";display:block;width:50px;height:50px;transform:translate(-50%,-50%);position:absolute;border-radius:50%;z-index:0;background-color:var(--category-icon-fill);transition:width var(--category-icon-duration) var(--category-icon-ease),height var(--category-icon-duration) var(--category-icon-ease);pointer-events:none}.category-icon-box:before{top:-1em;left:-1em}.category-icon-box:after{left:calc(100% + 1em);top:calc(100% + 1em)}.category-icon-box--selected:after,.category-icon-box--selected:before{width:220px;height:220px}.category-icon-box__icon{position:relative;z-index:1;height:3rem;width:3rem;object-fit:contain;pointer-events:none}.category-icon-box--selected:active{filter:brightness(.8)}@media (prefers-reduced-motion:reduce){.category-icon-box:after,.category-icon-box:before{transition:none}}}