@use 'iro-sass/src/iro-sass' as iro;
@use '../functions' as fn;
@use 'sass:math';

@use 'icon';

@include iro.props-namespace('emoji') {
    @include iro.props-store((
        --dims: (
            --size:     calc(1 / 14 * 18em),
            --pad:      .3em,
            --rounding: fn.global-dim(--rounding),
            --zoom:     3,
            --valign:   -.25em,

            --125: (
                --size:   calc(1 / 14 * 23em),
                --valign: -.45em,
            ),

            --150: (
                --size:   calc(1 / 14 * 28em),
                --valign: -.65em,
            ),

            --200: (
                --size:   calc(1 / 14 * 38em),
                --valign: -1em,
            )
        ),
        --colors: (
            --bg: fn.global-color(--border-mute),
        )
    ));

    @include iro.bem-object(iro.props-namespace()) {
        position:       relative;
        display:        inline-block;
        inline-size:    calc(fn.dim(--size));
        block-size:     calc(fn.dim(--size));
        padding:        calc(fn.dim(--pad));
        margin:         calc(-1 * fn.dim(--pad));
        vertical-align: fn.dim(--valign);
        object-fit:     contain;

        @include iro.bem-modifier('icon') {
            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
            vertical-align: fn.foreign-dim(--icon, --valign);
        }

        @each $size in '125' '150' '200' {
            @include iro.bem-modifier($size) {
                inline-size:    fn.dim(--#{$size} --size);
                block-size:     fn.dim(--#{$size} --size);
                vertical-align: fn.dim(--#{$size} --valign);

                @include iro.bem-modifier('icon') {
                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
                }
            }
        }

        @include iro.bem-modifier('zoomable') {
            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
            transition:    transform .2s ease, background-color .2s ease;

            &:hover {
                background-color: fn.color(--bg);
                transform:        scale(fn.dim(--zoom));
            }
        }
    }
}