/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use 'sass:math';

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/scroll-snap' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/ratio-base' as *;
@use '../../internal/content-section';
@use '../card';
@use '../image';
@use '../link-with-icon';

@mixin card-group {
  :host(#{$c4d-prefix}-card-group) {
    --#{$c4d-prefix}--card-group--cards-in-row: 1;

    display: grid;
    background: none;
    gap: 1px;
    grid-template-columns: 1fr;

    @include breakpoint(md) {
      grid-template-columns: repeat(2, 1fr);
    }

    @include breakpoint(lg) {
      grid-template-columns: repeat(
        var(--#{$c4d-prefix}--card-group--cards-in-row),
        1fr
      );
    }
  }

  :host(#{$c4d-prefix}-card-group):not(.is-full-width-template) {
    @include breakpoint-down(md) {
      padding-inline: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode]) {
    padding-block-start: 0;
    padding-inline: 1px;

    @include breakpoint-down(md) {
      padding-inline: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode='default']) {
    padding-block-start: $spacing-07;
  }

  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode='narrow']) {
    padding-block-start: $spacing-05;
  }

  :host(#{$c4d-prefix}-card-group-item) {
    display: contents;

    * {
      row-gap: 0;
    }

    .#{$prefix}--card {
      display: grid;
      border: 0;
      grid-row: span 10;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      margin-block-end: $spacing-07;
      outline: 1px solid $border-tile-01;
      outline-offset: 0;

      .#{$prefix}--card__wrapper {
        display: grid;
        justify-content: revert;
        grid-row: span 10;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        &::before,
        &::after {
          content: revert;
        }

        &::after {
          z-index: -1000;
          display: block;
          aspect-ratio: 16 / 9;
          content: '';
          grid-area: 1 / 1 / -1 / -1;
        }
      }

      .#{$prefix}--card__content {
        display: grid;
        grid-area: 1 / 1 / -1 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }

      .#{$prefix}--card__copy {
        display: grid;
        grid-row: span 2;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
    }

    .#{$prefix}--image {
      &__img {
        block-size: to-rem(240px);
      }

      @include breakpoint(lg) {
        @include ratio-base(4, 3, true);

        &__img {
          position: absolute;
          block-size: 100%;
          inset-block-start: 0;
        }
      }
    }

    &:focus,
    &:focus-within {
      .#{$prefix}--card {
        outline-offset: -1px;
      }
    }

    &[grid-mode='narrow'] {
      .#{$prefix}--card {
        margin-block-end: $spacing-05;
      }
    }

    &[grid-mode='condensed'] {
      .#{$prefix}--card {
        margin-block-end: $spacing-05;
      }
    }

    ::slotted(#{$c4d-prefix}-card-footer) {
      display: revert;
      margin-block-start: revert;
    }

    // Selects elements that contain tags which are slotted into the default
    // slot. Note that this does not work in Chrome at time of writing.
    // @see https://developer.chrome.com/blog/has-m105/#performance_and_limitations
    ::slotted(:not([slot]):has(#{$prefix}-tag, #{$c4d-prefix}-tag)) {
      grid-row: -1;
    }
  }

  :host(#{$c4d-prefix}-card-group-item[href='']) {
    .#{$prefix}--card {
      outline: none;
    }
  }

  :host(#{$c4d-prefix}-card-group-item[empty]) {
    visibility: hidden;
  }

  :host(#{$c4d-prefix}-card-group-item[link]) {
    ::slotted(#{$c4d-prefix}-card-heading) {
      @include type-style('heading-02');

      margin-block-end: 0;
    }

    .#{$prefix}--card .#{$prefix}--card__copy {
      margin-block-start: 0;
    }
  }

  :host(#{$c4d-prefix}-card-group)[grid-mode='narrow'] {
    @include breakpoint(sm) {
      gap: 0 $spacing-03;
      padding-block-start: $spacing-03;
    }

    @include breakpoint(md) {
      gap: 0 $spacing-05;
      padding-block-start: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-card-group)[grid-mode='default'] {
    @include breakpoint(sm) {
      gap: 0 $spacing-07;
      padding-block-start: $spacing-03;
    }

    @include breakpoint(md) {
      gap: 0 $spacing-07;
      padding-block-start: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-card-group)[grid-mode='condensed'] {
    @include breakpoint(sm) {
      gap: 1px;
      padding-block-start: $spacing-03;
    }

    @include breakpoint(md) {
      padding-block-start: $spacing-05;
    }
  }

  // card with video focus outline
  :host(#{$c4d-prefix}-card-group-item)[cta-type='video'] {
    &:focus-within {
      .#{$prefix}--tile {
        position: relative;
        outline: none;

        &::after {
          position: absolute;
          z-index: 2;
          box-shadow: inset 0 0 0 $spacing-01 $focus;
          content: '';
          inset: 0;
          pointer-events: none;
        }
      }
    }
  }

  // Mobile horizontal scroll snap behavior
  :host(#{$c4d-prefix}-card-group).inside-block-cards:not(
      .media-type-block-cards__logo
    ) {
    $gutter: 1rem;
    $gap: 1rem;

    @include breakpoint-down('md') {
      @include scroll-snap-container();

      display: flex;
      gap: $gap;
      padding-inline: $gutter;

      > ::slotted(a) {
        /* stylelint-disable-next-line declaration-no-important */
        display: grid !important;
        box-sizing: border-box;
        flex-basis: clamp(220px, 65vw, 400px);
        flex-shrink: 0;
        align-content: start;
        block-size: auto;

        // override web component internal padding and rely on gap instead
        padding-inline: 0;

        scroll-margin: $gutter;
        scroll-snap-align: start;
      }

      > ::slotted(#{$c4d-prefix}-card-group-item) {
        display: grid;
        box-sizing: border-box;
        flex-basis: clamp(220px, 65vw, 400px);
        flex-shrink: 0;
        align-content: start;
        block-size: auto;

        // // override web component internal padding and rely on gap instead
        padding-inline: 0;

        scroll-margin: $gutter;
        scroll-snap-align: start;
      }
    }
  }

  // Print styles
  @media print {
    :host(#{$c4d-prefix}-card-group) {
      display: flex;
      flex-wrap: nowrap;

      ::slotted(#{$c4d-prefix}-card-group-item),
      ::slotted(#{$c4d-prefix}-card-group-card-link-item),
      .#{$c4d-prefix}--card {
        border: 0 none;
        margin: 0 $spacing-03 $spacing-05;
        // need important since it gets overriden in WC Card Group without it
        /* stylelint-disable declaration-no-important */
        background-color: transparent !important;
        inline-size: 23%;
        /* stylelint-enable declaration-no-important */
      }
    }

    :host(#{$c4d-prefix}-card-group-item),
    :host(#{$c4d-prefix}-card-group-card-link-item) {
      background-color: transparent;

      &[empty] {
        @include breakpoint(md) {
          // need important since it gets overriden in WC Card Group without it
          /* stylelint-disable declaration-no-important */
          display: none !important;
          /* stylelint-enable declaration-no-important */
        }
      }

      .#{$prefix}--tile {
        border: 1px solid $border-subtle-01;
        background-color: transparent;
      }
    }
  }
}