as-icon {
    display: inline-flex;
    gap: var(--as-space-s);
    align-items: center;
    color: var(--color-icon, inherit);
    --rotate: 0deg;
    line-height: 0;

    &:AFTER {
        content: '';
        display: block;
        width: var(--size, var(--as-size-default));
        aspect-ratio: var(--as-ratio-square);
        mask-image: var(--icon, var(--as-icon-arrow-right));
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        color: currentColor;
        background-color: var(--color-icon, currentColor);
        rotate: var(--rotate, 0);
        transition: all var(--as-time-s) ease-out;
    }

    &[flip-x] {
        transform: scale(-1, 1);
    }

    &[flip-y] {
        transform: scale(1, -1);
    }

    &[flip-x][flip-y] {
        transform: scale(-1, -1);
    }

    &[image] {
        width: var(--size, var(--as-size-default));
        aspect-ratio: var(--as-ratio-square);
        display: block;
        rotate: var(--rotate);
    }

    &[image]:AFTER {
        content: unset;
    }

    &[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);
    }
}