// 1. Get ready for card link overlay.
// 2. Allow shrinking in grid layouts.
// 3. Make sure links and buttons are clickable.
// 4. Make text content selectable when there is a stretched CardLink.
// 5. Prepare card layouts for different breakpoints.
//    a) Layouts are common for all breakpoints, so they are defined once in the theme file.
//    b) Layout settings are applied to the grid via custom properties.
//    c) If there is an expanded CardMedia in a boxed card, replace card padding with empty grid columns/rows.
//    d) Padding is adjusted for different breakpoints.

@use 'sass:map';
@use '@tokens' as tokens;
@use '../../tools/breakpoint';
@use '../../tools/typography';
@use 'theme';

.Card {
    @include typography.generate(theme.$typography);

    position: relative; // 1.
    display: grid;
    grid-template-columns: var(--#{tokens.$css-variable-prefix}card-columns); // 5.b
    grid-template-rows: var(--#{tokens.$css-variable-prefix}card-rows); // 5.b
    grid-template-areas: var(--#{tokens.$css-variable-prefix}card-areas); // 5.b
    column-gap: var(--#{tokens.$css-variable-prefix}card-column-gap); // 5.b
    min-width: 0; // 2.
    color: theme.$color;
}

// 3., 4.
.Card:has(.CardLink) :where(a:not(.CardLink), button),
.Card:has(.CardLink):has(.CardBody--selectable) :where(p, ul, ol, dl) {
    position: relative;
    z-index: 1;
}

.Card--boxed {
    --#{tokens.$css-variable-prefix}card-padding: #{theme.$padding}; // 5.d

    border: theme.$border-width theme.$border-style theme.$border-color;
    border-radius: theme.$border-radius;
    background-color: theme.$background-color;

    &:has(.CardLink) {
        @media (hover: hover) {
            transition: box-shadow theme.$transition-duration theme.$transition-timing;

            &:hover {
                box-shadow: theme.$box-shadow-state-hover;
            }
        }
    }

    &:has(.CardMedia--expanded) {
        padding: var(--#{tokens.$css-variable-prefix}card-padding-shorthand); // 5.b
    }

    &:not(:has(.CardMedia--expanded)) {
        padding: var(--#{tokens.$css-variable-prefix}card-padding);
    }

    @include breakpoint.up(tokens.$breakpoint-tablet) {
        --#{tokens.$css-variable-prefix}card-padding: #{theme.$padding-tablet}; // 5.d
    }
}

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

    @include breakpoint.up($breakpoint-value) {
        .Card--#{$infix}vertical {
            --#{tokens.$css-variable-prefix}card-columns: #{map.get(theme.$layouts, vertical, columns)};
            --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts, vertical, rows)};
            --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts, vertical, areas)};
        }

        .Card--#{$infix}horizontal {
            --#{tokens.$css-variable-prefix}card-columns: #{map.get(theme.$layouts, horizontal, columns)};
            --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts, horizontal, rows)};
            --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts, horizontal, areas)};
        }

        .Card--#{$infix}horizontalReversed {
            --#{tokens.$css-variable-prefix}card-columns: #{map.get(theme.$layouts, horizontal-reversed, columns)};
            --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts, horizontal-reversed, rows)};
            --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts, horizontal-reversed, areas)};
        }

        .Card--#{$infix}vertical:has(.CardArtwork:not(:only-child), .CardMedia:not(:only-child)) {
            --#{tokens.$css-variable-prefix}card-column-gap: 0;
        }

        :is(.Card--#{$infix}horizontal, .Card--#{$infix}horizontalReversed):has(
                .CardArtwork:not(:only-child),
                .CardMedia:not(:only-child)
            ) {
            --#{tokens.$css-variable-prefix}card-column-gap: #{theme.$gap};
        }

        // 5.c
        .Card--boxed.Card--#{$infix}vertical {
            &:has(.CardMedia--expanded) {
                --#{tokens.$css-variable-prefix}card-columns: #{map.get(theme.$layouts-boxed, vertical, columns)};
                --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts-boxed, vertical, rows)};
                --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts-boxed, vertical, areas)};
            }

            &:has(.CardMedia:not(:only-child)) {
                --#{tokens.$css-variable-prefix}card-padding-shorthand: 0 0
                    var(--#{tokens.$css-variable-prefix}card-padding);
            }
        }

        // 5.c
        .Card--boxed.Card--#{$infix}horizontal {
            &:has(.CardMedia--expanded) {
                --#{tokens.$css-variable-prefix}card-columns: #{map.get(theme.$layouts-boxed, horizontal, columns)};
                --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts-boxed, horizontal, rows)};
                --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts-boxed, horizontal, areas)};
            }

            &:has(.CardMedia:not(:only-child)) {
                --#{tokens.$css-variable-prefix}card-padding-shorthand: 0
                    var(--#{tokens.$css-variable-prefix}card-padding) 0 0;
            }
        }

        // 5.c
        .Card--boxed.Card--#{$infix}horizontalReversed {
            &:has(.CardMedia--expanded) {
                --#{tokens.$css-variable-prefix}card-columns: #{map.get(
                        theme.$layouts-boxed,
                        horizontal-reversed,
                        columns
                    )};
                --#{tokens.$css-variable-prefix}card-rows: #{map.get(theme.$layouts-boxed, horizontal-reversed, rows)};
                --#{tokens.$css-variable-prefix}card-areas: #{map.get(theme.$layouts-boxed, horizontal-reversed, areas)};
            }

            &:has(.CardMedia:not(:only-child)) {
                --#{tokens.$css-variable-prefix}card-padding-shorthand: 0 0 0
                    var(--#{tokens.$css-variable-prefix}card-padding);
            }
        }
    }
}
