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);width:var(--size,var(--as-size-default))}&:where(:not(:defined)):after{visibility:hidden}&:where([ready]):after{transition:all var(--as-time-s) ease-out}&[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;height:fit-content;justify-content:center;padding:var(--as-icon-box-padding);width:fit-content}&[box][box-shape=square]{border-radius:0}&[box][box-shape=circle]{border-radius:50%}&[box][box-shape=squircle]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C10 0 0 10 0 50s10 50 50 50 50-10 50-50S90 0 50 0'/%3E%3C/svg%3E")}&[box][box-shape=diamond]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='m50 0 50 50-50 50L0 50z'/%3E%3C/svg%3E");--as-icon-box-inset:1.414;--as-icon-box-fit:.605}&[box][box-shape=hexagon]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='m50 0 43.3 25v50L50 100 6.7 75V25z'/%3E%3C/svg%3E");--as-icon-box-inset:1.155;--as-icon-box-fit:.402}&[box][box-shape=octagon]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M29.29 0h41.42L100 29.29v41.42L70.71 100H29.29L0 70.71V29.29z'/%3E%3C/svg%3E")}&[box][box-shape=star]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='m50 0 18.22 24.92 29.33 9.63-18.07 25.03-.09 30.87L50 81l-29.39 9.45-.09-30.87L2.45 34.55l29.33-9.63z'/%3E%3C/svg%3E");--as-icon-box-inset:1.694;--as-icon-box-fit:.76}&[box][box-shape=burst]{--as-icon-box-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='m50 0 10.61 10.4L75 6.7l3.99 14.31L93.3 25l-3.7 14.39L100 50 89.6 60.61 93.3 75l-14.31 3.99L75 93.3l-14.39-3.7L50 100 39.39 89.6 25 93.3l-3.99-14.31L6.7 75l3.7-14.39L0 50l10.4-10.61L6.7 25l14.31-3.99L25 6.7l14.39 3.7z'/%3E%3C/svg%3E");--as-icon-box-inset:1.4;--as-icon-box-fit:.453}&[box]:is([box-shape=squircle],[box-shape=diamond],[box-shape=hexagon],[box-shape=octagon],[box-shape=star],[box-shape=burst],[box-shape=custom]){border:0;border-radius:0;isolation:isolate;mask:var(--as-icon-box-mask,linear-gradient(#000 0 0)) center /100% 100% no-repeat;padding:max(calc(var(--as-icon-box-padding) + var(--as-icon-box-border-width)),calc(var(--size, var(--as-size-default))*var(--as-icon-box-fit, 0)));position:relative;--as-icon-box-ring:var(--as-icon-box-border-width);@media (max-resolution:1.99dppx){--as-icon-box-ring:max(var(--as-icon-box-border-width),1.5px)}&:before{--as-icon-box-hole:calc(100% - var(--as-icon-box-ring)*2*var(--as-icon-box-inset, 1));background:var(--as-icon-box-border-color);content:"";inset:0;mask:var(--as-icon-box-mask,linear-gradient(#000 0 0)) center /100% 100% no-repeat,var(--as-icon-box-mask,linear-gradient(#000 0 0)) center /var(--as-icon-box-hole) var(--as-icon-box-hole) no-repeat;mask-composite:exclude;position:absolute;z-index:-1}}&[size=xxs]{--size:var(--as-size-xxs)}&[size=xs]{--size:var(--as-size-xs)}&[size=s]{--size:var(--as-size-s)}&[size=default]{--size:var(--as-size-default)}&[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)}&[size=xxxl]{--size:var(--as-size-xxxl)}}