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

@include iro.props-namespace('card') {
    @include iro.props-store((
        --dims: (
            --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),

            --hover: (
                --offset-b: calc(-1 * fn.global-dim(--size --65)),
            ),

            --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),
            --divider:  fn.global-color(--border-mute),

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

            --quiet: (
                --image: fn.global-color(--bg-base),

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

    @include iro.bem-object(iro.props-namespace()) {
        display:          block;
        margin:           calc(-1 * fn.dim(--key-focus --border));
        background-color: fn.color(--bg);
        background-clip:  content-box;
        border:           fn.dim(--key-focus --border-offset) solid transparent;
        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
        transition:       transform .2s;

        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
            &:hover,
            &:active,
            &:focus-visible {
                transform: translateY(fn.dim(--hover --offset-b));
            }

            &:focus-visible {
                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('avatar') {
            margin-block-start:  fn.dim(--pad-b);
            margin-inline-start: fn.dim(--pad-i);
        }

        @include iro.bem-elem('image') {
            display:          block;
            inline-size:      100%;
            object-fit:       cover;
            transition:       transform .2s, opacity .2s;

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

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

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

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

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

        @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 {
                display:          block;
                block-size:       fn.dim(--divider);
                margin-block:     fn.dim(--spacing);
                content:          '';
                background-color: fn.color(--divider);
            }
        }

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

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

                    @include iro.bem-elem('image') {
                        background-color: fn.color(--quiet --hover --image);
                        opacity:          .75;
                        transform:        translateY(fn.dim(--hover --offset-b));
                    }
                }

                &:focus-visible {
                    outline:    none;
                    box-shadow: none;

                    @include iro.bem-elem('image') {
                        background-color: fn.color(--quiet --hover --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);
                        opacity:          1;
                    }
                }
            }

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

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

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