@use 'iro-sass/src/index' as iro;
@use '../functions' as fn;

@include iro.props-namespace('card') {
    @include iro.props-store((
        --dims: (
            --border:   fn.global-dim(--border --thin),
            --divider:  fn.global-dim(--border --thin),
            --pad-i:    fn.global-dim(--size --300),
            --pad-b:    fn.global-dim(--size --250),
            --spacing:  fn.global-dim(--size --200),
            --rounding: fn.global-dim(--rounding),

            --key-focus: (
                --border:        fn.global-dim(--key-focus --border),
                --border-offset: fn.global-dim(--key-focus --border-offset),
                --outline:       fn.global-dim(--key-focus --outline),
            ),
        ),
        --colors: (
            --bg:       fn.global-color(--bg-l2),
            --image-bg: fn.global-color(--border-mute),
            --border:   fn.global-color(--border-mute),
            --divider:  fn.global-color(--border-mute),

            --hover: (
                --border: fn.global-color(--border),
            ),

            --key-focus: (
                --label:   fn.global-color(--focus --text),
                --border:  fn.global-color(--focus --border),
                --outline: fn.global-color(--focus --outline),
            ),

            --quiet: (
                --hover: (
                    --border: fn.global-color(--text-disabled),
                ),
            ),
        ),
    ));

    @include iro.bem-object(iro.props-namespace()) {
        display:          block;
        border:           fn.dim(--border) solid fn.color(--border);
        border-radius:    fn.dim(--rounding);
        background-color: fn.color(--bg);

        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
            &:hover,
            &:focus-visible,
            &:active {
                border-color: fn.color(--hover --border);
            }

            &:focus-visible {
                border-color: fn.color(--key-focus --border);
                outline:      fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
                box-shadow:   0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
            }
        }

        @include iro.bem-elem('avatar') {
            margin-block-start:  fn.dim(--pad-b);
            margin-inline-start: fn.dim(--pad-i);
        }

        @include iro.bem-elem('image') {
            position:         relative;
            inline-size:      100%;
            overflow:         hidden;
            background-color: fn.color(--image-bg);

            &:first-child {
                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
            }

            &:last-child {
                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
            }

            @include iro.bem-next-elem('avatar') {
                margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
            }
        }

        @include iro.bem-elem('image-img') {
            display:     block;
            object-fit:  cover;
            inline-size: 100%;
            block-size:  100%;
        }

        @include iro.bem-elem('body') {
            padding-block:  fn.dim(--pad-b);
            padding-inline: fn.dim(--pad-i);

            &::before {
                content:       '';
                display:       block;
                margin-block:  -100em 100em;
            }
        }

        @include iro.bem-elem('content') {
            margin-block-start: fn.dim(--spacing);
        }

        @include iro.bem-elem('footer') {
            padding-block:      0 fn.dim(--pad-b);
            padding-inline:     fn.dim(--pad-i);
            margin-block-start: calc(-1 * fn.dim(--pad-b));

            &::before {
                content:          '';
                display:          block;
                block-size:       fn.dim(--divider);
                margin-block:     fn.dim(--spacing);
                background-color: fn.color(--divider);
            }
        }

        @include iro.bem-modifier('quiet') {
            position:         relative;
            border:           0;
            background-color: transparent;

            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                &:hover,
                &:active {
                    @include iro.bem-elem('image') {
                        outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
                    }
                }
                
                &:focus-visible {
                    outline:    none;
                    box-shadow: none;

                    @include iro.bem-elem('image') {
                        outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
                        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                    }
                }
            }

            @include iro.bem-elem('image') {
                margin:          calc(-1 * fn.dim(--key-focus --border));
                border:          fn.dim(--key-focus --border) solid transparent;
                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
                background-clip: padding-box;
            }

            @include iro.bem-elem('body') {
                padding:             0;
                padding-block-start: fn.dim(--spacing);
            }

            @include iro.bem-elem('footer') {
                padding-inline: 0;
            }
        }
    }
}