// 1. Expand any images or videos to fill the available space, not just direct descendants. This is for the scenario
//    when the media is wrapped, for example in a link.
// 2. Make sure rounded corners are applied to video player too.
// 3. Do not let the media push the body content out of the horizontal card.

@use '@tokens' as tokens;
@use '../../tools/breakpoint';
@use '../../tools/dictionaries';
@use 'theme';

.CardMedia {
    grid-area: media;
    align-self: var(--#{tokens.$css-variable-prefix}card-media-align-self);
    min-width: 0; // 3.
    overflow: hidden;
    border-radius: var(--#{tokens.$css-variable-prefix}card-media-border-radius-shorthand, #{theme.$border-radius});

    &:not(:last-child) {
        margin-bottom: var(--#{tokens.$css-variable-prefix}card-media-margin-bottom);
    }
}

.CardMedia__canvas {
    width: var(--#{tokens.$css-variable-prefix}card-media-canvas-width);
    max-width: 100%; // 3.
    height: var(--#{tokens.$css-variable-prefix}card-media-canvas-height);
}

// 1.
.CardMedia__canvas :where(img, svg, video) {
    display: block; // 2.
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
    @include breakpoint.up($breakpoint-value) {
        $infix: breakpoint.get-modifier(infix, $breakpoint-name, $breakpoint-value);

        .Card--#{$infix}vertical > {
            @include dictionaries.generate-sizes($class-name: 'CardMedia', $sizes: theme.$media-sizes-vertical);
        }

        :is(.Card--#{$infix}horizontal, .Card--#{$infix}horizontalReversed) > {
            @include dictionaries.generate-sizes($class-name: 'CardMedia', $sizes: theme.$media-sizes-horizontal);
        }

        .Card--#{$infix}vertical > .CardMedia {
            --#{tokens.$css-variable-prefix}card-media-canvas-width: auto;
            --#{tokens.$css-variable-prefix}card-media-canvas-height: var(--spirit-card-media-size);
            --#{tokens.$css-variable-prefix}card-media-align-self: initial;
            --#{tokens.$css-variable-prefix}card-media-margin-bottom: #{theme.$gap-dense};
        }

        :is(.Card--#{$infix}horizontal, .Card--#{$infix}horizontalReversed) > .CardMedia {
            --#{tokens.$css-variable-prefix}card-media-canvas-width: var(--spirit-card-media-size);
            --#{tokens.$css-variable-prefix}card-media-canvas-height: auto;
            --#{tokens.$css-variable-prefix}card-media-align-self: start;
            --#{tokens.$css-variable-prefix}card-media-margin-bottom: 0;
        }

        :is(.Card--#{$infix}horizontal, .Card--#{$infix}horizontalReversed)
            > :is(.CardMedia--expanded, .CardMedia--filledHeight) {
            --#{tokens.$css-variable-prefix}card-media-canvas-height: 100%;
            --#{tokens.$css-variable-prefix}card-media-align-self: stretch;
        }

        .Card--boxed.Card--#{$infix}vertical > .CardMedia--expanded:not(:last-child) {
            --#{tokens.$css-variable-prefix}card-media-border-radius-shorthand: #{theme.$border-radius} #{theme.$border-radius}
                0 0;
        }

        .Card--boxed.Card--#{$infix}horizontal > .CardMedia--expanded:not(:last-child) {
            --#{tokens.$css-variable-prefix}card-media-border-radius-shorthand: #{theme.$border-radius} 0 0 #{theme.$border-radius};
        }

        .Card--boxed.Card--#{$infix}horizontalReversed > .CardMedia--expanded:not(:last-child) {
            --#{tokens.$css-variable-prefix}card-media-border-radius-shorthand: 0 #{theme.$border-radius} #{theme.$border-radius}
                0;
        }
    }
}
