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

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

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

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

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

    body {
        //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));

        padding:          0;
        margin:           0;
        color:            props.get(global-vars.$theme, --text);
        background-color: props.get(global-vars.$theme, --bg-base);
    }

    pre,
    code {
        font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
    }

    pre,
    code {
        //@include mx.set-font(--mono, (--size: .93em));
    }

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

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        //@include mx.heading-medium(--md);

        margin-block: props.get(vars.$heading--margin-bs) 0;

        & + & {
            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(global-vars.$font-size--75);
    }

    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(global-vars.$theme, --text-mute);
            opacity: 1;
        }

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

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

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