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

@include iro.props-namespace('emoji') {
    @include iro.props-store((
        --dims: (
            --size:     1.4,
            --pad:      .3,
            --rounding: 3px,
            --zoom:     4,
            --valign:   -.3em,

            --150: (
                --size:   2.1,
                --valign: -.65em,
            ),

            --200: (
                --size:   2.8,
                --valign: -1em,
            )
        )
    ), 'dims');

    @include iro.props-store((
        --colors: (
            --bg: fn.global-color(--obj-hi),
        )
    ), 'colors');

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

        @each $size in '150' '200' {
            @include iro.bem-modifier($size) {
                height:         calc(1em * fn.dim(--#{$size} --size));
                margin:         calc(-1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
                padding:        calc(1em * fn.dim(--pad) * (fn.dim(--#{$size} --size) / fn.dim(--size)));
                vertical-align: fn.dim(--#{$size} --valign);
            }
        }

        @include iro.bem-modifier('svg') {
            width: calc(1em * fn.dim(--size));

            @each $size in '150' '200' {
                @include iro.bem-modifier($size) {
                    width: calc(1em * fn.dim(--#{$size} --size));
                }
            }
        }

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

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

            @each $size in '150' '200' {
                @include iro.bem-modifier($size) {
                    &:hover {
                        transform: scale(calc(fn.dim(--zoom) * (fn.dim(--size) / fn.dim(--#{$size} --size))));
                    }
                }
            }
        }
    }
}