/**
 * Copyright IBM Corp. 2016, 2024
 *
 * 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:map';

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/grid' as *;
@use '@carbon/styles/scss/motion' 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 '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../components/image';
@use '../../components/card';
@use '../../globals/utils/aspect-ratio' as *;
@use '../../globals/utils/hang' as *;

$feature-flags: (
  enable-experimental-tile-contrast: true,
);

@mixin feature-card {
  // All feature cards.
  :host(#{$c4d-prefix}-feature-card),
  :host(#{$c4d-prefix}-feature-cta) {
    display: block;
    // breaks on Firefox with `rem` function
    border-width: 1px;
    border-style: solid;
    // avoid shorthand for border to render correctly
    border-color: $border-subtle-selected;

    &:hover {
      ::slotted([slot='image']),
      #{$c4d-prefix}-image,
      .#{$prefix}--image {
        &::before {
          opacity: 0.08;
        }
      }
    }

    &:focus-within {
      border-color: transparent;
    }

    .#{$prefix}--card {
      @include breakpoint-down(md) {
        display: block;
      }

      @include breakpoint(md) {
        flex-direction: row;
      }

      &:focus-within {
        outline: none;
        outline-offset: 0;

        &::before {
          position: absolute;
          z-index: 1;
          display: block;
          border: $spacing-01 solid $focus;
          content: '';
          inset: -1px;
          outline: 1px solid $focus-inset;
          outline-offset: -3px;

          @include breakpoint-down(md) {
            min-block-size: 292px;
          }
        }
      }
    }

    .#{$prefix}--card__image-wrapper,
    .#{$prefix}--card__wrapper {
      flex: 1 0 50%;
    }

    .#{$prefix}--card__image-wrapper {
      aspect-ratio: 1 / 1;
    }

    .#{$prefix}--card__wrapper {
      &::before,
      &::after {
        display: none;
      }
    }

    .#{$prefix}--card__content {
      justify-content: space-between;
      padding: $spacing-05;
      aspect-ratio: 2 / 1;
      transition: background-color $duration-moderate-01
        motion(standard, productive);

      @include breakpoint(md) {
        aspect-ratio: auto;
      }
    }

    .#{$prefix}--card__eyebrow-wrapper--empty,
    .#{$prefix}--card__pictogram-wrapper--empty {
      display: none;
    }

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

      @include breakpoint(md) {
        @include type-style('body-01');
      }

      @include breakpoint(lg) {
        @include type-style('body-02');
      }
    }

    ::slotted([slot='image']),
    #{$c4d-prefix}-image {
      z-index: 0;
      block-size: 100%;

      // Opacity is adjusted on hover. See above.
      &::before {
        position: absolute;
        z-index: 1;
        block-size: 100%;
        content: '';
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        opacity: 0;
        transition: opacity $duration-moderate-01 motion(standard, productive);
      }

      @media screen and (prefers-reduced-motion: reduce) {
        &::before {
          transition: none;
        }
      }
    }

    ::slotted(#{$c4d-prefix}-card-eyebrow),
    ::slotted(#{$c4d-prefix}-card-heading) {
      inline-size: 100%;

      @include breakpoint(md) {
        inline-size: 90%;
      }
    }

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

    ::slotted(#{$c4d-prefix}-card-eyebrow) {
      margin-inline-end: $spacing-03;
    }
  }

  // All large feature cards.
  :host(#{$c4d-prefix}-feature-card)[size='large'],
  :host(#{$c4d-prefix}-feature-cta)[size='large'] {
    .#{$prefix}--card__content {
      @include breakpoint(xlg) {
        padding: $spacing-07;
      }
    }

    ::slotted(#{$c4d-prefix}-card-heading) {
      @include breakpoint(xlg) {
        @include type-style('heading-04');
      }
    }
  }

  // Color changes for inverse color scheme.
  :host(#{$c4d-prefix}-feature-card)[color-scheme='inverse'],
  :host(#{$c4d-prefix}-feature-cta)[color-scheme='inverse'] {
    border-color: $border-inverse;

    ::slotted(#{$c4d-prefix}-card-heading) {
      color: $focus-inset;
    }

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

    ::slotted([slot='image']),
    #{$c4d-prefix}-image,
    .#{$prefix}--image {
      &::before {
        background-color: $icon-inverse;
      }
    }
  }

  // Feature cards that are not size large. Color changes.
  :host(
      #{$c4d-prefix}-feature-card:not([size='large'])
    )[color-scheme='inverse'],
  :host(
      #{$c4d-prefix}-feature-cta:not([size='large'])
    )[color-scheme='inverse'] {
    .#{$prefix}--card__wrapper {
      background-color: $background-inverse;
    }

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

    // footer
    .#{$prefix}--feature-card__card .#{$prefix}--card__footer svg {
      fill: $link-inverse;
    }
  }

  // Feature cards that are size large. Color changes for inverse color scheme.
  :host(#{$c4d-prefix}-feature-card[size='large'])[color-scheme='inverse'],
  :host(#{$c4d-prefix}-feature-cta[size='large'])[color-scheme='inverse'] {
    .#{$prefix}--card__wrapper {
      background-color: $background-inverse;

      .#{$prefix}--card__eyebrow,
      .#{$prefix}--card__copy,
      ::slotted(#{$c4d-prefix}-card-eyebrow),
      ::slotted(#{$c4d-prefix}-card-heading) {
        color: $icon-inverse;
      }
      .#{$prefix}--card__eyebrow,
      ::slotted(#{$c4d-prefix}-card-eyebrow) {
        color: $icon-inverse;
      }

      ::slotted(#{$c4d-prefix}-card-heading) {
        color: $icon-inverse;
      }
    }
  }

  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse'] {
    .#{$c4d-prefix}-ce--card__footer {
      .#{$c4d-prefix}-ce--cta__icon,
      ::slotted(svg[slot='icon']) {
        fill: $link-inverse;
      }

      &:hover {
        .#{$c4d-prefix}-ce--cta__icon,
        ::slotted(svg[slot='icon']) {
          fill: $link-inverse-hover;
        }
      }

      &:active {
        .#{$c4d-prefix}-ce--cta__icon,
        ::slotted(svg[slot='icon']) {
          fill: $link-inverse-active;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-feature-card[size='large']) {
    ::slotted(#{$c4d-prefix}-feature-card-footer) {
      display: flex;
      justify-content: flex-end;

      @include breakpoint(xlg) {
        justify-content: flex-end;
      }
    }
  }

  :host(#{$c4d-prefix}-feature-card-footer),
  :host(#{$c4d-prefix}-feature-cta-footer) {
    display: flex;
    justify-content: flex-end;

    @include breakpoint(md) {
      justify-content: flex-end;
    }

    &[size='large'] {
      .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) {
        @include breakpoint(max) {
          block-size: $spacing-10;
          inline-size: $spacing-10;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-feature-card[size='large'])[color-scheme='inverse']:hover
    .#{$prefix}--card__wrapper {
    background-color: $background-inverse-hover;
  }
}