as-icon{align-items:center;color:var(--color-icon,inherit);display:inline-flex;gap:var(--as-space-s);--rotate:0deg;line-height:0;&:after{aspect-ratio:var(--as-ratio-square);background-color:var(--color-icon,currentColor);color:currentColor;content:"";display:block;mask-image:var(--icon,var(--as-icon-arrow-right));mask-position:center;mask-repeat:no-repeat;mask-size:contain;rotate:var(--rotate,0);transition:all var(--as-time-s) ease-out;width:var(--size,var(--as-size-default))}&[flip-x]{transform:scaleX(-1)}&[flip-y]{transform:scaleY(-1)}&[flip-x][flip-y]{transform:scale(-1)}&[image]{aspect-ratio:var(--as-ratio-square);display:block;rotate:var(--rotate);width:var(--size,var(--as-size-default))}&[image]:after{content:unset}&[box]{--as-icon-box-background:transparent;--as-icon-box-border-color:transparent;--as-icon-box-border-width:var(--as-size-thin);--as-icon-box-radius:var(--as-border-radius-m);--as-icon-box-padding:var(--as-space-s);aspect-ratio:var(--as-ratio-square);background:var(--as-icon-box-background);border:var(--as-icon-box-border-width) solid var(--as-icon-box-border-color);border-radius:var(--as-icon-box-radius);box-sizing:border-box;flex:none;justify-content:center;padding:var(--as-icon-box-padding);width:fit-content}&[size=s]{--size:var(--as-size-s)}&[size=m]{--size:var(--as-size-m)}&[size=l]{--size:var(--as-size-l)}&[size=xl]{--size:var(--as-size-xl)}&[size=xxl]{--size:var(--as-size-xxl)}}