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

@forward 'text-field.vars';
@use 'text-field.vars' as vars;

@mixin -invalid {
    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
    
    @include bem.sibling-elem('bg') {
        inset-block:   $focus-border-offset;
        inset-inline:  $focus-border-offset;
        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
    }

    &:hover {
        @include bem.sibling-elem('bg') {
            border-color: props.get(vars.$error--hover--border-color);
        }
    }

    &:focus {
        @include bem.sibling-elem('bg') {
            border-color: props.get(vars.$error--focus--border-color);
        }
    }
}

@mixin -keyboard-focus {
    @include bem.sibling-elem('bg') {
        border-color:   props.get(vars.$key-focus--border-color);
        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
        //outline-offset: props.get(vars.$focus --border);
    }
}

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

    @include bem.object('text-field') {
        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
        
        position:         relative;
        min-inline-size:  0;
        background-color: props.get(vars.$bg-color);
        border-radius:    props.get(vars.$rounding);

        @include bem.elem('bg') {
            position:       absolute;
            inset-block:    0;
            inset-inline:   0;
            display:        block;
            pointer-events: none;
            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
            border-radius:  props.get(vars.$rounding);
        }

        @include bem.elem('native') {
            box-sizing:       border-box;
            inline-size:      100%;
            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
            padding-inline:   props.get(vars.$pad-i);
            font:             inherit;
            line-height:      props.get(vars.$line-height);
            color:            props.get(vars.$text-color);
            appearance:       none;
            resize:           none;
            background-color: transparent;
            border:           1px solid transparent;

            &::placeholder {
                font-style: italic;
                color:      props.get(vars.$placeholder-color);
                opacity:    1;
            }

            &:hover {
                @include bem.sibling-elem('bg') {
                    border-color: props.get(vars.$hover--border-color);
                }
            }

            &:focus {
                outline: 0;

                @include bem.sibling-elem('bg') {
                    inset-block:   $focus-border-offset;
                    inset-inline:  $focus-border-offset;
                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
                }
            }

            &:invalid {
                @include -invalid;
            }

            &:focus-visible,
            &:invalid:focus-visible {
                @include -keyboard-focus;
            }
        }

        @include bem.modifier('extended') {
            padding: props.get(vars.$extended--pad);

            @include bem.multi('&', 'elem' 'bg') {
                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
            }

            @include bem.elem('native') {
                &:focus {
                    @include bem.sibling-elem('bg') {
                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
                    }
                }
            }
        }

        @include bem.is('invalid') {
            @include bem.elem('native') {
                @include -invalid;

                &:focus-visible {
                    @include -keyboard-focus;
                }
            }
        }

        @include bem.is('disabled') {
            background-color: props.get(vars.$disabled--bg-color);

            @include bem.elem('native') {
                color: props.get(vars.$disabled--text-color);

                &::placeholder {
                    color: props.get(vars.$disabled--placeholder-color);
                }
            }

            @include bem.elem('bg') {
                border-color: props.get(vars.$disabled--border-color);
            }

            @include bem.is('invalid') {
                @include bem.elem('native') {
                    @include bem.sibling-elem('bg') {
                        border-color: props.get(vars.$disabled--border-color);
                    }
                }
            }

            @include bem.elem('native') {
                &:invalid {
                    @include bem.sibling-elem('bg') {
                        border-color: props.get(vars.$disabled--border-color);
                    }
                }
            }
        }
    }
}