@use 'sass:math';
@use 'sass:meta';
@use 'iro-sass/src/iro-sass' as iro;
@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'));

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

    html,
    body {
        block-size: 100%;
    }

    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-color);
        border:           0;
    }
}