@use 'sass:list';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use '../props' as *;

@forward 'action-button.vars';
@use 'action-button.vars' as vars;

@mixin -apply-theme($theme, $key: ()) {
    color:            props.get($theme, list.join($key, --disabled --label-color)...);
    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);

    &::after {
        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
        box-shadow:
            0
            0
            0
            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
            props.get($theme, list.join($key, --key-focus --outline-color)...);
    }

    &:link,
    &:visited,
    &:enabled {
        color:            props.get($theme, list.join($key, --label-color)...);
        background-color: props.get($theme, list.join($key, --bg-color)...);
        border-color:     props.get($theme, list.join($key, --border-color)...);

        &:hover,
        &:focus-visible {
            color:            props.get($theme, list.join($key, --hover --label-color)...);
            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
        }

        &:active {
            color:            props.get($theme, list.join($key, --active --label-color)...);
            background-color: props.get($theme, list.join($key, --active --bg-color)...);
            border-color:     props.get($theme, list.join($key, --active --border-color)...);
        }
    }

    @include bem.modifier('quiet') {
        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
        background-color: transparent;
        border-color:     transparent;

        &:link,
        &:visited,
        &:enabled {
            color:            props.get($theme, list.join($key, --quiet --label-color)...);
            background-color: transparent;
            border-color:     transparent;

            &:hover,
            &:focus-visible {
                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
                border-color:     transparent;
            }

            &:active {
                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
                border-color:     transparent;
            }
        }
    }

    @include bem.is('selected') {
        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
        background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
        border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);

        &:link,
        &:visited,
        &:enabled {
            color:            props.get($theme, list.join($key, --selected --label-color)...);
            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
    
            &:hover,
            &:focus-visible {
                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
            }
    
            &:active {
                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
            }
        }
    }
}

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

    @include bem.object('action-button') {
        position:         relative;
        display:          inline-block;
        padding-block:    props.get(vars.$pad-b);
        padding-inline:   props.get(vars.$pad-i);
        line-height:      props.get(vars.$line-height);
        text-align:       center;
        text-decoration:  none;
        text-overflow:    ellipsis;
        white-space:      nowrap;
        border:           props.get(vars.$border-width) solid transparent;
        border-radius:    props.get(vars.$rounding);

        &::after {
            position:       absolute;
            inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
            z-index:        1;
            display:        none;
            pointer-events: none;
            content:        '';
            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
            outline:        transparent solid props.get(vars.$key-focus--border-width);
        }

        &:link,
        &:visited,
        &:enabled {
            &:focus-visible {
                &::after {
                    display: block;
                }
            }
        }

        @include bem.elem('label') {
            margin-inline: props.get(vars.$pad-i-label);
        }

        @include -apply-theme(vars.$default-theme);

        @each $theme in map.keys(props.get(vars.$themes)) {
            @include bem.modifier(string.slice($theme, 3)) {
                @include -apply-theme(vars.$themes, $theme);
            }
        }

        @include bem.modifier('pill') {
            padding-inline: props.get(vars.$pad-i-pill);
            border-radius:  100em;

            &::after {
                border-radius:  100em;
            }
        }

        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
            @include bem.modifier($mod) {
                padding-block:  props.get($pad-b);
                padding-inline: props.get($pad-i);
                font-size:      props.get($font-size);

                @include bem.elem('label') {
                    margin-inline: props.get($pad-i-label);
                }

                @include bem.modifier('pill') {
                    padding-inline: props.get($pad-i-pill);
                }
            }
        }

        @include bem.modifier('icon') {
            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
            padding-inline: 0;

            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                @include bem.modifier($mod) {
                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
                    padding-inline: 0;
                }
            }
        }
    }
}