@use 'sass:math';
@use 'sass:meta';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;
@use '../core.vars' as core;

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

@mixin styles {
    @include materialize-at-root(meta.module-variables('vars'));

    @layer scope {
        html {
            accent-color:    props.get(core.$theme, --accent, --600);
            scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
        }

        body {
            padding:               0;
            margin:                0;
            font-family:           props.get(vars.$body--font-family);
            font-size:             props.get(vars.$body--font-size);
            font-feature-settings: props.get(vars.$body--feature-settings);
            line-height:           props.get(vars.$body--line-height);
            color:                 props.get(core.$theme, --text);
            background-color:      props.get(core.$theme, --bg-base);
        }

        pre,
        code {
            font-family:           props.get(vars.$code--font-family);
            font-size:             props.get(vars.$code--font-size);
            font-feature-settings: props.get(vars.$code--feature-settings);
            line-height:           props.get(vars.$code--line-height);
        }

        pre {
            margin:     0;
            overflow-x: auto;

            code {
                font-size: 1em;
                color:     currentColor;
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-block:          props.get(vars.$heading--margin-bs) 0;
            font-family:           props.get(vars.$heading--font-family);
            font-size:             props.get(vars.$heading--font-size);
            font-weight:           props.get(vars.$heading--font-weight);
            font-feature-settings: props.get(vars.$heading--feature-settings);
            line-height:           props.get(vars.$heading--line-height);
            color:                 props.get(vars.$heading--color);

            & + & {
                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
            }
        }

        p {
            margin-block: props.get(vars.$paragraph--margin-bs) 0;

            &:empty {
                display: none;
            }
        }

        strong {
            font-weight: bold;
        }

        small {
            font-size: props.get(vars.$small--font-size);
        }

        ul,
        ol {
            padding:    0;
            margin:     0;
            list-style: none;
        }

        li {
            padding: 0;
            margin:  0;
        }

        :focus,
        :focus-visible {
            outline: 0;
        }

        :link,
        :visited {
            color:           currentColor;
            text-decoration: none;
        }


        button,
        input,
        textarea {
            box-sizing:     content-box;
            padding:        0;
            margin:         0;
            font-family:    inherit;
            font-size:      1em;
            font-style:     inherit;
            font-weight:    inherit;
            line-height:    inherit;
            color:          currentColor;
            text-align:     inherit;
            text-transform: inherit;
            appearance:     none;
            background:     none;
            border:         0;

            &::-moz-focus-inner {
                border: 0;
            }
        }

        input,
        textarea {
            &::placeholder {
                color:   props.get(core.$theme, --text-mute);
                opacity: 1;
            }

            &:disabled {
                color: props.get(core.$theme, --text-disabled);
            }
        }

        textarea {
            block-size: calc(1em * props.get(core.$font--standard--line-height));
        }

        hr {
            block-size:       props.get(core.$border-width--thin);
            margin:           0;
            background-color: props.get(core.$theme, --border);
            border:           0;
        }

        figure {
            padding: 0;
            margin:  0;
        }

        @each $theme in map.keys(props.get(core.$transparent-colors)) {
            $theme-name: static-#{string.slice($theme, 3)};
    
            @include bem.at-theme($theme-name) {
                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: props.get(core.$transparent-colors, $theme, --text);
                }

                hr {
                    color: props.get(core.$transparent-colors, $theme, --400);
                }
            }
        }
    }
}