/**
 * Copyright IBM Corp. 2016, 2025
 *
 * 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 '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/components/tag/index' as *;
@use '@carbon/styles/scss/components/tile/index' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/content-width' as *;
@use '../../globals/utils/ratio-base' as *;
@use '../lightbox-media-viewer/lightbox-media-viewer';
@use '../link-with-icon/link-with-icon';

@mixin card {
  .#{$prefix}--card,
  :host(#{$c4d-prefix}-card),
  :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
  :host(#{$c4d-prefix}-card-cta),
  :host(#{$c4d-prefix}-card-in-card),
  :host(#{$c4d-prefix}-card-group-item),
  :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
  :host(#{$c4d-prefix}-content-group-cards-item),
  :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
    @include tile($enable-experimental-tile-contrast: true);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: $layer-01;
    block-size: 100%;
    inline-size: 100%;
    text-decoration: none;
    transition: $duration-moderate-01 motion(standard, productive);

    &:focus-within {
      .#{$prefix}--tile--clickable {
        position: relative;
        z-index: 2;
        outline: $spacing-01 solid $focus;
        outline-offset: -#{$spacing-01};
      }

      ::slotted(#{$c4d-prefix}-image),
      ::slotted(#{$c4d-prefix}-card-cta-image),
      .#{$prefix}--card__img,
      .#{$prefix}--image {
        z-index: -1;
      }
    }

    &:focus,
    &:visited,
    &:active {
      position: relative;
      z-index: 2;
      text-decoration: none;

      ::slotted(#{$c4d-prefix}-image),
      .#{$prefix}--image {
        z-index: -1;
      }
    }

    ::slotted(#{$c4d-prefix}-image),
    ::slotted(#{$c4d-prefix}-card-cta-image) {
      position: relative;
      @media screen and (prefers-reduced-motion: reduce) {
        &::before {
          position: absolute;
          background-color: $border-inverse;
          content: '';
          inset: 0;
          opacity: 0;
          transition: none;
        }
      }

      &::before {
        position: absolute;
        background-color: $border-inverse;
        content: '';
        inset: 0;
        opacity: 0;
        transition: $duration-moderate-01 motion(standard, productive);
      }
    }

    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
      padding: 0;
      transition: $duration-moderate-01 motion(standard, productive);

      &:hover {
        #{$c4d-prefix}-image,
        ::slotted(#{$c4d-prefix}-image),
        ::slotted(#{$c4d-prefix}-card-cta-image) {
          &::after {
            position: absolute;
            background: $overlay;
            block-size: 100%;
            content: '';
            inline-size: 100%;
            inset-block-start: 0;
            opacity: 16%;
          }
        }
      }
    }

    .#{$prefix}--card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .#{$prefix}--card__wrapper {
      display: flex;
      flex: 1;
      justify-content: space-between;
      min-block-size: $spacing-13;
      transition: $duration-moderate-01 motion(standard, productive);

      @include ratio-base(2, 1, false);
    }

    .#{$prefix}--card__content {
      display: flex;
      flex-direction: column;
      padding: $spacing-05;
      inline-size: 100%;
    }

    .#{$prefix}--card__heading {
      @include type-style('fluid-heading-03', true);

      margin-block-end: $spacing-10;
    }

    .#{$prefix}--card__heading,
    .#{$prefix}--card__copy {
      color: $text-primary;
      max-inline-size: to-rem(640px);
      padding-inline-end: 10%;

      @include breakpoint(md) {
        padding-inline-end: $spacing-07;
      }
    }

    .#{$prefix}--card__copy {
      @include type-style('body-02');

      margin-block-end: $spacing-07;
    }

    .#{$prefix}--card__img {
      transition: $duration-moderate-01 motion(standard, productive);
    }

    .#{$prefix}--card__link::after {
      position: absolute;
      content: '';
      inset: 0;
    }

    .#{$prefix}--card__footer-wrapper {
      margin-block-start: auto;
    }
  }

  // Gutter space for mobile view
  :host(#{$c4d-prefix}-content-group-cards-item) {
    @include breakpoint-down(md) {
      inline-size: auto;
      margin-inline: $spacing-05;
    }
  }

  // Card with pictogram placement style
  :host(#{$c4d-prefix}-card-group-item),
  :host(#{$c4d-prefix}-card-in-card),
  :host(#{$c4d-prefix}-card-cta),
  :host(#{$c4d-prefix}-card) {
    outline: none;

    .#{$prefix}--card__pictogram {
      display: flex;

      ::slotted(#{$c4d-prefix}-card-heading) {
        margin-block-end: 0;
        padding-block-start: $spacing-07;

        @include breakpoint(md) {
          display: flex;
          flex: 1;
          padding-inline-start: 0;
        }
      }
    }

    .#{$prefix}--card__pictogram-wrapper {
      display: flex;
    }

    &[pictogram] .#{$prefix}--card {
      ::slotted(#{$c4d-prefix}-card-heading) {
        padding-block-start: 0;
      }

      ::slotted(svg[slot='pictogram']) {
        margin-inline-start: 0;
      }

      .#{$prefix}--card__content {
        position: relative;
      }

      .#{$prefix}--card__copy {
        margin-block: $spacing-07 0;
      }

      svg {
        position: absolute;
        color: $link-primary;
        inset-block-end: $spacing-05;
        inset-inline-end: $spacing-05;
      }
    }

    &[pictogram] {
      &[pictogram-placement='top'] .#{$prefix}--card {
        ::slotted(#{$c4d-prefix}-card-heading) {
          align-items: flex-end;
          margin-block: auto 0;
        }

        .#{$prefix}--card__copy {
          margin-block-start: $spacing-07;
        }

        ::slotted(svg[slot='pictogram']) {
          margin-block-end: $spacing-07;
        }
      }

      &[pictogram-placement='bottom'] .#{$prefix}--card {
        ::slotted(#{$c4d-prefix}-card-heading) {
          align-items: flex-start;
        }

        .#{$prefix}--card__content {
          padding-block-end: $spacing-10;
        }

        .#{$prefix}--card__pictogram-wrapper {
          position: absolute;
          inset-block-end: $spacing-05;
          inset-inline-start: $spacing-05;
        }

        .#{$prefix}--card__copy {
          margin-block-end: $spacing-07;
        }

        ::slotted(svg[slot='pictogram']) {
          align-items: flex-end;
          margin-block-start: auto;
        }
      }
    }

    ::slotted(svg[slot='pictogram']) {
      fill: currentColor;
      @include breakpoint(md) {
        margin-inline-start: 0;
      }
      @include breakpoint(sm) {
        margin-inline-start: $spacing-05;
      }
    }

    &[color-scheme='inverse'] {
      .#{$prefix}--card svg,
      ::slotted(svg[slot='pictogram']) {
        color: $link-inverse;
      }
    }

    .#{$prefix}--card__copy {
      display: flex;
      flex-direction: column;
      gap: $spacing-05;

      &[hidden] {
        // Need important to force [hidden] to really mean hidden above many
        // other variants setting display.
        /* stylelint-disable declaration-no-important */
        display: none !important;
      }
    }

    //Replicating V1 hover behavior
    @media (pointer: fine) {
      &[pictogram-placement='top'] .#{$prefix}--card,
      &[pictogram-placement='bottom'] .#{$prefix}--card {
        .#{$prefix}--card__motion {
          ::slotted(#{$c4d-prefix}-card-heading) {
            padding-block-start: 0;

            @include breakpoint('md') {
              /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
              display: -webkit-box;
              /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              max-inline-size: calc(100% - #{$spacing-10});
              opacity: 1;
              transform: translate3d(0, 0, 0);
              transition: all $duration-moderate-02 motion(standard, productive)
                0.25s;
            }
          }

          .#{$prefix}--card__copy {
            margin-block: $spacing-07 0;

            @include breakpoint('md') {
              margin-block-start: 0;
              opacity: 0;
              transform: translate3d(0, -16px, 0);
              transition: all $duration-moderate-02 motion(standard, productive);
              visibility: hidden;
            }
          }
        }

        &:hover,
        &:focus {
          .#{$prefix}--card__motion {
            ::slotted(#{$c4d-prefix}-card-heading) {
              @include breakpoint('md') {
                opacity: 0;
                transform: translate3d(0, 16px, 0);
                transition-delay: 0s;
              }
            }

            .#{$prefix}--card__copy {
              @include breakpoint('md') {
                display: grid;
                overflow: hidden;
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition-delay: 0.2s;
                visibility: visible;
              }
            }
          }
        }
      }

      &[pictogram-placement='top'] .#{$prefix}--card {
        .#{$prefix}--card__motion {
          ::slotted(#{$c4d-prefix}-card-heading) {
            @include breakpoint('md') {
              position: absolute;
              display: flow-root;
              inset-block-end: $spacing-05;
            }
          }

          .#{$prefix}--card__copy {
            @include breakpoint('md') {
              margin-block-start: $spacing-07;
            }
          }

          ::slotted(svg[slot='pictogram']) {
            @include breakpoint('md') {
              margin-block-end: 0;
            }
          }
        }
      }
    }
  }

  :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
    @include ratio-base(1, 1, false);
  }

  :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
    @include ratio-base(3, 2, false);
  }

  :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
    @include ratio-base(4, 3, false);
  }

  :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
    @include ratio-base(16, 9, false);
  }
  .#{$prefix}--card.#{$prefix}--card--light {
    background-color: $layer-02;
  }

  .#{$prefix}--card--border {
    border: 1px solid $layer-accent-01;
  }

  // FIXME: CardLink is being used as Card in React, need to separate this
  .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading {
    @include type-style('fluid-heading-03', true);
  }

  // static card

  :host(#{$c4d-prefix}-card),
  :host(#{$c4d-prefix}-card-group-item) {
    &:not([href]) {
      .#{$prefix}--card .#{$prefix}--card__copy {
        margin-block-end: $spacing-01;
      }

      .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
        &::after {
          display: none;
        }
      }

      &:focus-within ::slotted(#{$c4d-prefix}-image) {
        z-index: 0;
      }

      ::slotted(#{$c4d-prefix}-card-heading) {
        margin-block-end: auto;
        padding-block-end: $spacing-10;
      }

      ::slotted(#{$c4d-prefix}-card-footer) {
        display: inline-flex;
        margin-block-start: $spacing-07;

        &::after {
          position: relative;
        }
      }
    }

    &[color-scheme='light'] {
      &,
      &:hover {
        .#{$prefix}--card__wrapper {
          background-color: $layer-02;
          transition: $duration-moderate-01 motion(standard, productive);
        }
      }

      &[href] {
        :hover {
          .#{$prefix}--card__wrapper {
            background-color: $background-hover;
          }
        }

        &:active,
        a:active {
          outline: none;
        }
      }
    }

    // Logo card
    &[logo] {
      .#{$prefix}--card {
        background-color: $layer-02;
      }

      .#{$prefix}--card__copy {
        margin-block-end: $spacing-05;
      }

      &:hover {
        border-color: $toggle-off;

        .#{$prefix}--card__wrapper {
          background-color: $layer-02;
        }
      }

      &:active {
        border-color: $border-inverse;
      }

      ::slotted(#{$c4d-prefix}-card-footer) {
        block-size: 0;
      }
    }

    &[href][logo] {
      &:hover {
        .#{$prefix}--card__wrapper {
          background-color: $layer-02;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-card[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-cta),
  :host(#{$c4d-prefix}-card-link-cta),
  :host(#{$c4d-prefix}-card-link) {
    outline: none;
  }

  :host(#{$c4d-prefix}-card-eyebrow),
  .#{$prefix}--card__eyebrow {
    display: block;
    @include content-width;
    @include type-style('label-02');

    color: $text-secondary;

    margin-block-end: $spacing-03;
  }

  :host(#{$c4d-prefix}-card-footer),
  :host(#{$c4d-prefix}-card-cta-footer),
  :host(#{$c4d-prefix}-card-in-card-footer),
  :host(#{$c4d-prefix}-feature-card-footer),
  :host(#{$c4d-prefix}-feature-cta-footer) {
    display: flex;
    align-items: flex-end;
    margin-block-start: auto;

    &:focus-visible {
      outline: none;
    }
  }

  :host(#{$c4d-prefix}-card-footer) {
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
      display: flex;

      svg,
      ::slotted(svg[slot='icon']) {
        display: block;
      }
    }
  }

  .#{$prefix}--card .#{$prefix}--card__footer,
  :host(#{$c4d-prefix}-card-footer) a,
  :host(#{$c4d-prefix}-card-cta-footer) a,
  :host(#{$c4d-prefix}-card-in-card-footer) a,
  :host(#{$c4d-prefix}-feature-card-footer) a,
  :host(#{$c4d-prefix}-feature-cta-footer) a {
    text-decoration: none;

    &:focus {
      outline: none;
    }

    &:hover {
      text-decoration: none;
    }

    span {
      flex: none;
    }

    &::after {
      position: absolute;
      z-index: 1;
      content: '';
      inset: 0;
    }

    .#{$prefix}--card__cta__copy {
      margin-inline-end: $spacing-03;
      max-inline-size: calc(100% - 20px - #{$spacing-03});
      @include type-style('body-02');
    }

    .#{$prefix}--card__footer__copy {
      margin-block-end: -$spacing-01;
      max-inline-size: calc(100% - 20px);
    }

    svg,
    ::slotted(svg[slot='icon']) {
      display: block;
      margin-inline-start: 0;
      min-inline-size: 20px;
    }
  }

  :host(#{$c4d-prefix}-card-footer),
  :host(#{$c4d-prefix}-card-cta-footer) {
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      inline-size: 100%;

      &:active {
        color: $link-primary-hover;
      }
    }

    &[color-scheme='inverse']
      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
        .#{$prefix}--link--disabled
      ) {
      color: $link-inverse;
    }
  }

  //Contact card footer
  :host(#{$c4d-prefix}-card-footer[cta-type='contact']),
  :host(#{$c4d-prefix}-card-footer[cta-type='chat']) {
    pointer-events: none;
  }

  // static card footer
  :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
    .#{$prefix}--card__footer {
      justify-content: flex-start;
      inline-size: auto;

      &:hover {
        color: $link-primary-hover;
      }

      &:active,
      &:hover {
        text-decoration: none;
      }

      &::after {
        content: none;
      }

      &:focus {
        outline: $spacing-01 solid $focus;
      }
    }

    .#{$prefix}--card__cta__copy {
      margin-inline-end: $spacing-03;
    }
  }

  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not(
      [disabled]
    ) {
    .#{$prefix}--tile {
      border-color: $background-inverse;
      background-color: $background-inverse;

      &:hover {
        .#{$c4d-prefix}-image,
        ::slotted(#{$c4d-prefix}-image),
        ::slotted(#{$c4d-prefix}-card-cta-image) {
          filter: brightness(108%);

          &::after {
            display: none;
          }
        }
      }
    }

    .#{$prefix}--card__wrapper:hover {
      background-color: $background-inverse-hover;
    }

    .#{$prefix}--card__heading,
    .#{$prefix}--card__copy {
      color: $icon-inverse;
    }

    .#{$prefix}--card__eyebrow {
      color: $text-placeholder;
    }

    &:focus-within {
      &::after {
        position: absolute;
        z-index: 2;
        border: $spacing-01 solid $focus;
        content: '';
        inset: 0;
        outline: 1px solid $focus-inset;
        outline-offset: -3px;
        pointer-events: none;
      }
    }
  }

  :host(#{$c4d-prefix}-card-heading),
  :host(#{$c4d-prefix}-card-link-heading) {
    display: block;
    @include content-width;

    color: $text-primary;

    margin-block-end: $spacing-10;
  }

  :host(#{$c4d-prefix}-card-heading) {
    @include type-style('heading-03', true);
  }

  :host(#{$c4d-prefix}-card-link-heading) {
    @include type-style('heading-02', true);

    margin-block-end: 0;
  }

  :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
  :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
  .#{$prefix}--card-group__card {
    ::slotted(#{$c4d-prefix}-card-eyebrow),
    ::slotted(#{$c4d-prefix}-card-heading),
    ::slotted(#{$c4d-prefix}-card-link-heading) {
      color: $text-inverse;
    }

    &:hover {
      ::slotted(#{$c4d-prefix}-image),
      ::slotted(#{$c4d-prefix}-card-cta-image) {
        filter: brightness(108%);
      }
    }
  }

  @media print {
    :host(#{$c4d-prefix}-card),
    :host(#{$c4d-prefix}-card-group-item),
    :host(#{$c4d-prefix}-card-cta),
    :host(#{$c4d-prefix}-card-in-card),
    :host(#{$c4d-prefix}-content-group-cards-item) {
      border: 1px solid $layer-accent-01;

      .#{$prefix}--card {
        border: none;
        background-color: $layer-02;
      }

      ::slotted(#{$c4d-prefix}-image),
      ::slotted(#{$c4d-prefix}-card-cta-image),
      .#{$prefix}--image {
        display: none;
      }
    }

    .#{$prefix}--card {
      border: 1px solid $layer-accent-01;
      background-color: $layer-02;

      .#{$prefix}--card__img,
      .#{$prefix}--card__image_img,
      .#{$prefix}--image,
      .#{$prefix}--card__video-thumbnail {
        display: none;
      }
    }
  }

  :host(#{$c4d-prefix}-card[disabled]),
  :host(#{$c4d-prefix}-region-item[disabled]) {
    .#{$prefix}--card {
      cursor: not-allowed;
    }

    .#{$prefix}--card__copy,
    ::slotted(#{$c4d-prefix}-card-eyebrow),
    ::slotted(#{$c4d-prefix}-card-heading) {
      color: $text-disabled;
    }
  }

  :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
  :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
      justify-content: space-between;
    }
  }

  :host(#{$c4d-prefix}-card-footer[href])::after {
    position: relative;
  }
}