@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),
            --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),
            ),
        ),
    ));

    @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('thumbnail') {
            position: relative;
            width:    100%;
            height:   100%;
        }

        @include iro.bem-elem('thumbnail-img') {
            display:    block;
            object-fit: cover;
            width:      100%;
            height:     100%;
        }

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

        @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;
                height:           fn.dim(--divider);
                margin-block:     fn.dim(--spacing);
                background-color: fn.color(--divider);
            }
        }
    }
}