@use 'sass:map';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use 'include-media/dist/include-media' as media;

@use 'core.vars' as vars;
@forward 'core.vars';

/* stylelint-disable-next-line scss/dollar-variable-pattern */
$-dirs: (
    '': '',
    'bs': '-block-start',
    'be': '-block-end',
    'b':  '-block',
    'is': '-inline-start',
    'ie': '-inline-end',
    'i':  '-inline',
) !default;

/* stylelint-disable-next-line scss/dollar-variable-pattern */
$-sizes: (
    0: vars.$size--0,
    10: vars.$size--10,
    50: vars.$size--50,
    75: vars.$size--75,
    100: vars.$size--100,
    125: vars.$size--125,
    200: vars.$size--200,
    400: vars.$size--400,
    700: vars.$size--700,
    800: vars.$size--800,
) !default;

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

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

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

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

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

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

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

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

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

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

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

    @include bem.utility('va-top') {
        vertical-align: top;
    }

    @include bem.utility('va-baseline') {
        vertical-align: baseline;
    }

    @include bem.utility('va-middle') {
        vertical-align: middle;
    }

    @include bem.utility('va-bottom') {
        vertical-align: bottom;
    }

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

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

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

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

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

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

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

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

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

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

    @include bem.utility('tt-upper') {
        text-transform: uppercase;
    }

    @include bem.utility('tt-lower') {
        text-transform: lowercase;
    }

    @include bem.utility('c-heading') {
        color: props.get(vars.$theme, --heading);

        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
            $theme-name: static-#{string.slice($theme, 3)};
    
            @include bem.at-theme($theme-name) {
                color: props.get(vars.$transparent-colors, $theme, --900);
            }
        }
    }

    @include bem.utility('c-text') {
        color: props.get(vars.$theme, --text);

        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
            $theme-name: static-#{string.slice($theme, 3)};
    
            @include bem.at-theme($theme-name) {
                color: props.get(vars.$transparent-colors, $theme, --800);
            }
        }
    }

    @include bem.utility('c-mute') {
        color: props.get(vars.$theme, --text-mute);

        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
            $theme-name: static-#{string.slice($theme, 3)};
    
            @include bem.at-theme($theme-name) {
                color: props.get(vars.$transparent-colors, $theme, --700);
            }
        }
    }

    @include bem.utility('c-mute-more') {
        color: props.get(vars.$theme, --text-mute-more);

        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
            $theme-name: static-#{string.slice($theme, 3)};
    
            @include bem.at-theme($theme-name) {
                color: props.get(vars.$transparent-colors, $theme, --600);
            }
        }
    }

    @each $dir, $prop in (is: inline-size, bs: block-size) {
        @include bem.utility('#{$dir}-100') {
            #{$prop}: 100%;
        }
        
        @include bem.utility('#{$dir}-75') {
            #{$prop}: 75%;
        }
        
        @include bem.utility('#{$dir}-50') {
            #{$prop}: 50%;
        }
        
        @include bem.utility('#{$dir}-25') {
            #{$prop}: 25%;
        }
        
        @include bem.utility('#{$dir}-1px') {
            #{$prop}: 1px;
        }
        
        @include bem.utility('#{$dir}-0') {
            #{$prop}: 0;
        }
    }

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

    @include bem.utility('o-auto') {
        overflow: auto;
    }

    @include bem.utility('o-hidden') {
        overflow: hidden;
    }

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

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

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

    @include bem.utility('p-sticky-bs') {
        position:          sticky;
        inset-block-start: props.get(vars.$sticky-top-offset);
    }

    @include bem.utility('p-sticky-be') {
        position:        sticky;
        inset-block-end: 0;
    }

    @include bem.utility('br-round') {
        border-radius: props.get(vars.$rounding);
    }

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

        @each $mod, $size in $-sizes {
            @include bem.utility('m#{$dir}-#{$mod}') {
                margin#{$suffix}: props.get($size);
            }
            
            @include bem.utility('p#{$dir}-#{$mod}') {
                padding#{$suffix}: props.get($size);
            }
        }
        
        @include bem.utility('b#{$dir}-0') {
            border#{$suffix}: 0;

            @include bem.suffix('light') {
                @media (prefers-color-scheme: light) {
                    border#{$suffix}: 0;
                }
            }
        
            @include bem.suffix('dark') {
                @media (prefers-color-scheme: dark) {
                    border#{$suffix}: 0;
                }
            }
        }
        
        @include bem.utility('b#{$dir}-1') {
            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);

            @include bem.suffix('light') {
                @media (prefers-color-scheme: light) {
                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                }
            }
        
            @include bem.suffix('dark') {
                @media (prefers-color-scheme: dark) {
                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                }
            }
        }
        
        @include bem.utility('b#{$dir}-1-mute') {
            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);

            @include bem.suffix('light') {
                @media (prefers-color-scheme: light) {
                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
                }
            }
        
            @include bem.suffix('dark') {
                @media (prefers-color-scheme: dark) {
                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
                }
            }
        }
    }

    @include bem.utility('mbs-neutralize') {
        &::before {
            display:       block;
            margin-block:  -100em 100em;
            content:       '';
        }
    }
    
    @include bem.utility('sr-only') {
        position:    absolute;
        width:       1px;
        height:      1px;
        padding:     0;
        margin:      -1px;
        overflow:    hidden;
        clip-path:   inset(50%);
        white-space: nowrap;
        border:      0;
    }
}