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

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

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

    @include bem.object('thumbnail') {
        position:       relative;
        display:        block;
        inline-size:    props.get(vars.$size);
        block-size:     props.get(vars.$size);
        overflow:       hidden;
        border-radius:  props.get(vars.$rounding);
        outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
        outline-offset: calc(-1 * props.get(vars.$border-width));
        opacity:       .75;

        &:hover,
        &:active,
        &:focus-visible {
            outline-color: props.get(vars.$hover--border-color);
            opacity:       1;
        }

        @include bem.is('selected') {
            $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));

            margin:        $focus-border-offset;
            border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
            border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
            outline:       none;
            opacity:       1;
        }

        @include bem.elem('image') {
            position:           absolute;
            inset-block-start:  0;
            inset-inline-start: 0;
            display:            block;
            inline-size:        100%;
            block-size:         100%;
            object-fit:         cover;
            object-position:    center center;
        }

        @include bem.elem('icon') {
            position:           absolute;
            inset-block-start:  50%;
            inset-inline-start: 50%;
            transform:          translate(-50%, -50%);
        }

        &:focus-visible {
            $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));

            margin:         $focus-border-offset;
            border:         props.get(vars.$key-focus--border-offset) solid transparent;
            border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
            outline-offset: 0;
            box-shadow:
                0
                0
                0
                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
                props.get(vars.$key-focus--outline-color);
        }

        @each $theme in map.keys(props.get(vars.$static-themes)) {
            @include bem.modifier(string.slice($theme, 3)) {
                outline-color: props.get(vars.$static-themes, $theme, --border);

                &:hover,
                &:active,
                &:focus-visible {
                    outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
                }
    
                @include bem.is('selected') {
                    border-color: props.get(vars.$static-themes, $theme, --selected, --border);
                }

                &:focus-visible {
                    border-color:  transparent;
                    outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
                    box-shadow: 
                        0
                        0
                        0
                        calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
                        props.get(vars.$static-themes, $theme, --key-focus, --outline);
                }
            }
        }
    }
}