@use 'sass:map';
@use 'iro-sass/src/index' as iro;
@use 'functions' as fn;
@use 'include-media/dist/include-media' as media;

$dirs: (
    '': '',
    'bs': '-block-start',
    'be': '-block-end',
    'b':  '-block',
    'is': '-inline-start',
    'ie': '-inline-end',
    'i':  '-inline',
) !default;

$sizes: 0 10 50 75 100 125 200 400 700 800 !default;

@include iro.bem-utility('d-block') {
    display: block;
}

@include iro.bem-utility('d-inline-block') {
    display: inline-block;
}

@include iro.bem-utility('d-contents') {
    display: contents;
}

@include iro.bem-utility('td-none') {
    text-decoration: none;
}

@include iro.bem-utility('d-none') {
    display: none;

    @each $breakpoint in map.keys(media.$breakpoints) {
        @include media.media('<=#{$breakpoint}') {
            @include iro.bem-suffix('#{$breakpoint}-lo') {
                display: none;
            }
        }

        @include media.media('>#{$breakpoint}') {
            @include iro.bem-suffix('#{$breakpoint}-hi') {
                display: none;
            }
        }
    }

    @include iro.bem-at-theme('js') {
        @include iro.bem-suffix('js') {
            display: none;
        }
    }

    @include iro.bem-at-theme('no-js') {
        @include iro.bem-suffix('no-js') {
            display: none;
        }
    }

    @include iro.bem-suffix('empty') {
        &:empty {
            display: none;
        }
    }
}

@include iro.bem-utility('ta-start') {
    text-align: start;
}

@include iro.bem-utility('ta-end') {
    text-align: end;
}

@include iro.bem-utility('ta-center') {
    text-align: center;
}

@include iro.bem-utility('fw-normal') {
    font-weight: normal;
}

@include iro.bem-utility('ai-center') {
    align-items: center;
}

@include iro.bem-utility('ai-start') {
    align-items: flex-start;
}

@include iro.bem-utility('ai-end') {
    align-items: flex-end;
}

@include iro.bem-utility('jc-center') {
    justify-content: center;
}

@include iro.bem-utility('jc-start') {
    justify-content: flex-start;
}

@include iro.bem-utility('jc-end') {
    justify-content: flex-end;
}

@include iro.bem-utility('c-heading') {
    color: fn.color(--heading);
}

@include iro.bem-utility('c-text') {
    color: fn.color(--text);
}

@include iro.bem-utility('c-mute') {
    color: fn.color(--text-mute);
}

@include iro.bem-utility('c-mute-more') {
    color: fn.color(--text-mute-more);
}

@include iro.bem-utility('mt-neutralize') {
    &::before {
        content:       '';
        display:       block;
        margin-block:  -100em 100em;
    }
}

@include iro.bem-utility('is-100') {
    inline-size: 100%;
}

@include iro.bem-utility('is-75') {
    inline-size: 75%;
}

@include iro.bem-utility('is-50') {
    inline-size: 50%;
}

@include iro.bem-utility('is-25') {
    inline-size: 25%;
}

@include iro.bem-utility('is-1px') {
    inline-size: 1px;
}

@include iro.bem-utility('is-0') {
    inline-size: 0;
}

@include iro.bem-utility('elp') {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

@include iro.bem-utility('p-static') {
    position: static;
}

@include iro.bem-utility('p-relative') {
    position: relative;
}

@include iro.bem-utility('p-sticky-top') {
    position: sticky;
    top:      0;
}

@each $dir, $suffix in $dirs {
    @include iro.bem-utility('m#{$dir}-auto') {
        margin#{$suffix}: auto;
    }
    
    @include iro.bem-utility('p#{$dir}-auto') {
        padding#{$suffix}: auto;
    }

    @each $size in $sizes {
        @include iro.bem-utility('m#{$dir}-#{$size}') {
            margin#{$suffix}: fn.global-dim(--size --#{$size});
        }
        
        @include iro.bem-utility('p#{$dir}-#{$size}') {
            padding#{$suffix}: fn.global-dim(--size --#{$size});
        }
    }
    
    @include iro.bem-utility('b#{$dir}-0') {
        border#{$suffix}: 0;
    }
    
    @include iro.bem-utility('b#{$dir}-1') {
        border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
    }
}