/**
 * 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 'sass:map';
@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/themes' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/utils/content-width' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/utils/ratio-base' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../button-group';
@use '../image';

$btn-min-width: 26;

@keyframes loading-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

// items that change according to the theme applied
@mixin themed-items($theme: white) {
  // TODO: figure out how to use the $background color token instead with rgba()
  $cds--gradient-light: #ffffff;
  $cds--gradient-dark: #161616;

  .#{$c4d-prefix}--leadspace__section {
    display: flex;
    background-color: $background;

    @media print {
      background-color: $background;
    }
  }

  .#{$c4d-prefix}--leadspace__gradient__stops stop {
    stop-color: $background;
  }

  .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__overlay {
    background-color: $background;
  }

  ::slotted(#{$c4d-prefix}-leadspace-heading),
  .#{$c4d-prefix}--leadspace__title,
  .#{$c4d-prefix}--leadspace__desc {
    color: $text-primary;
    padding-inline-end: 0;
  }

  .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__desc {
    inline-size: 100%;
  }

  @include breakpoint(md) {
    .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__overlay {
      background-color: transparent;
    }
  }
}

@mixin leadspace {
  ::slotted([slot='action']) {
    padding-block: $spacing-07;
  }

  :host(#{$c4d-prefix}-leadspace) {
    position: relative;
    display: block;
    @media screen and (prefers-reduced-motion: reduce) {
      &::before {
        position: absolute;
        z-index: -1;
        animation: none;
        background: linear-gradient(270deg, #c6c6c6, #a8a8a8);
        background-size: 100% 100%;
        block-size: 100%;
        content: '';
        inline-size: 100%;
        opacity: 0;
        transition: none;
      }
    }

    &::before {
      position: absolute;
      z-index: -1;
      animation: loading-animation 2000ms ease infinite;
      background: linear-gradient(270deg, #c6c6c6, #a8a8a8);
      background-size: 100% 100%;
      block-size: 100%;
      content: '';
      inline-size: 100%;
      opacity: 0;
      transition: all 800ms cubic-bezier(0.4, 0.14, 0.3, 1);
    }

    &[loading] {
      &::before {
        z-index: 5;
        opacity: 1;
      }
    }

    ::slotted(#{$c4d-prefix}-background-media) {
      aspect-ratio: 4 / 3; /* stylelint-disable-line property-no-unknown */
      block-size: auto;

      @include breakpoint(lg) {
        position: absolute;
        aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
        block-size: 100%;
        inset: 0;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace),
  .#{$c4d-prefix}--leadspace {
    .#{$prefix}--image {
      /* stylelint-disable-next-line comment-whitespace-inside */
      /* !rtl:raw:
      transform: scaleX(-1);
      */

      picture {
        inline-size: 100%;
        max-inline-size: to-rem(1584px);
      }
    }

    .#{$c4d-prefix}--leadspace--content__container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      block-size: 100%;
      margin-block-end: $spacing-07;
    }

    .#{$c4d-prefix}--leadspace__container {
      position: relative;
      inline-size: 100%;

      @include breakpoint(lg) {
        position: static;
      }
    }

    ::slotted(#{$c4d-prefix}-button-group),
    ::slotted(#{$c4d-prefix}-leadspace-block-cta) {
      @include breakpoint(md) {
        display: grid;
        grid-template-columns: repeat(
          var(--#{$c4d-prefix}--button-group--item-count),
          1fr
        );
        @media print {
          display: block;
        }
      }
    }

    .#{$c4d-prefix}--leadspace__overlay {
      @include make-container;

      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      inline-size: 100%;
      max-inline-size: none;
      padding-block-start: $spacing-05;

      @include breakpoint-down(md) {
        inline-size: auto;
      }
    }

    .#{$c4d-prefix}--leadspace--productive {
      ::slotted(#{$c4d-prefix}-leadspace-heading),
      .#{$c4d-prefix}--leadspace__title {
        @include type-style(fluid-heading-05, true);
      }
    }

    .#{$c4d-prefix}--leadspace__desc {
      z-index: 1;
      @include make-col-ready;
      @include type-style(fluid-heading-03, true);
      @include make-col(4, 4);

      margin-block-end: 0;

      @include breakpoint-down(lg) {
        margin-block-start: 0;
      }

      @include breakpoint(md) {
        inline-size: calc(80% - $spacing-07);
      }

      @include breakpoint(lg) {
        inline-size: calc(30% - $spacing-07);
      }
    }

    .#{$c4d-prefix}--leadspace__row {
      @include make-row;

      flex-flow: column nowrap;
    }

    .#{$c4d-prefix}--leadspace__action {
      @include breakpoint(md) {
        display: inline-block;
      }
    }

    @include breakpoint(md) {
      .#{$c4d-prefix}--leadspace__overlay {
        inset-block-start: 0;
        padding-block-start: $spacing-07;
      }

      .#{$prefix}--image {
        block-size: 100%;
      }

      ::slotted(#{$c4d-prefix}-leadspace-heading),
      .#{$c4d-prefix}--leadspace__title {
        flex-shrink: 1;
        inline-size: percentage(math.div(6, 8));
      }
    }

    @include breakpoint(lg) {
      position: relative;
      overflow: hidden;
      inline-size: 100vw;
      inset-inline: 50%;
      margin-inline: -50vw;

      .#{$c4d-prefix}--leadspace__section {
        position: relative;
        margin-inline: auto;
        max-inline-size: 99rem;
      }

      .#{$c4d-prefix}--leadspace__container {
        inline-size: 100%;
      }

      ::slotted(#{$c4d-prefix}-leadspace-heading),
      .#{$c4d-prefix}--leadspace__title {
        inline-size: percentage(math.div(6, 16));
      }

      .#{$c4d-prefix}--leadspace__desc {
        @include make-col(6, 16);

        inline-size: percentage(math.div(6, 16));

        @include breakpoint(md) {
          inline-size: percentage(math.div(4, 8));
          max-inline-size: 50%;
          @include make-col(6, 16);
        }
      }

      .#{$c4d-prefix}--leadspace--productive {
        ::slotted(#{$c4d-prefix}-leadspace-heading),
        .#{$c4d-prefix}--leadspace__title {
          @include make-col(6, 16);
        }
      }
    }

    .#{$c4d-prefix}--leadspace--centered {
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
      margin-inline: auto;
      max-inline-size: 99rem;

      ::slotted(#{$c4d-prefix}-button-group),
      ::slotted([slot='action']) {
        padding-block: $spacing-05 0;

        @include breakpoint(lg) {
          padding-block-end: calc(#{$spacing-12} + #{$spacing-13});
        }
      }

      &.#{$c4d-prefix}--leadspace__section {
        min-block-size: to-rem(560px);
        padding-block-start: 0;
      }

      .#{$c4d-prefix}--leadspace--content__container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-block-end: $spacing-07;

        @include make-col-ready;
        @include make-col(4, 4);
      }

      .#{$c4d-prefix}--leadspace__desc {
        inline-size: 95%;
        padding-block-start: $spacing-09;

        @include type-style(fluid-heading-03, true);
      }

      ::slotted(#{$c4d-prefix}-leadspace-heading),
      .#{$c4d-prefix}--leadspace__title {
        margin-block-end: 0;
      }

      .#{$c4d-prefix}--leadspace__desc,
      ::slotted(#{$c4d-prefix}-leadspace-heading),
      .#{$c4d-prefix}--leadspace__title {
        flex: none;
      }

      @include themed-items;

      @include breakpoint(sm) {
        .#{$c4d-prefix}--leadspace__overlay {
          padding: $spacing-05 0 0 0;
        }
      }

      @include breakpoint(md) {
        .#{$c4d-prefix}--leadspace__overlay {
          padding: $spacing-07 0 0 0;
        }

        .#{$c4d-prefix}--leadspace--content__container {
          margin: 0 auto;
          padding-inline-start: $spacing-06;
          @include breakpoint(lg) {
            @include make-col(4, 8);
          }
        }

        ::slotted(#{$c4d-prefix}-leadspace-heading),
        .#{$c4d-prefix}--leadspace__title,
        .#{$c4d-prefix}--leadspace__desc {
          @include content-width;
        }

        .#{$c4d-prefix}--leadspace__desc {
          padding-block-start: $spacing-09;
        }
      }

      @include breakpoint(lg) {
        .#{$c4d-prefix}--leadspace__overlay {
          padding: $spacing-10 0 0 0;
          block-size: 100%;
        }
      }
    }

    @include themed-items;

    .#{$c4d-prefix}--leadspace--g100,
    .#{$c4d-prefix}--leadspace--g90 {
      @include theme(
        $g100,
        feature-flag-enabled('enable-css-custom-properties')
      );

      @include themed-items(dark);
    }

    .#{$c4d-prefix}--leadspace__gradient {
      position: absolute;
      display: block;
      block-size: 100%;
      inline-size: calc(100% + 1px);
      inset-block-start: 0;
      inset-inline-start: -1px;
      padding-block-end: 0;

      @media print {
        display: none;
      }
    }

    .#{$c4d-prefix}--leadspace__gradient__rect {
      fill: url(#stops);
    }

    .#{$c4d-prefix}--leadspace__gradient__stops stop {
      &:nth-of-type(1) {
        stop-opacity: 1;
        /* stylelint-disable-next-line comment-whitespace-inside */
        /* !rtl:raw:
        stop-opacity: 0;
        */
      }

      &:nth-of-type(2) {
        stop-opacity: 1;
        /* stylelint-disable-next-line comment-whitespace-inside */
        /* !rtl:raw:
        stop-opacity: 0;
        */
      }

      &:nth-of-type(3) {
        stop-opacity: 0.75;
      }

      &:nth-of-type(4) {
        stop-opacity: 0;
        /* stylelint-disable-next-line comment-whitespace-inside */
        /* !rtl:raw:
        stop-opacity: 1;
        */
      }
    }

    .#{$c4d-prefix}--leadspace--centered
      .#{$c4d-prefix}--leadspace__gradient__stops
      stop {
      &:nth-of-type(1) {
        stop-opacity: 1;
      }

      &:nth-of-type(2) {
        stop-opacity: 0.8;
      }

      &:nth-of-type(3) {
        stop-opacity: 0.6;
      }

      &:nth-of-type(4) {
        stop-opacity: 0;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace) ::slotted([slot='navigation']) {
    z-index: 1;
    max-inline-size: 40rem;
    // need the !important to prevent CSS reset styles from overwritting margin for tags
    /* stylelint-disable declaration-no-important */
    padding-block-end: $spacing-05 !important;
    padding-inline: $spacing-05 !important;
    /* stylelint-enable declaration-no-important */
  }

  :host(#{$c4d-prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link {
    color: $text-primary;
    cursor: auto;

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

  :host(#{$c4d-prefix}-leadspace) ::slotted(#{$c4d-prefix}-leadspace-image) {
    @include breakpoint(lg) {
      block-size: 100%;
    }
  }

  :host(#{$c4d-prefix}-leadspace-heading),
  .#{$c4d-prefix}--leadspace__title {
    z-index: 1;
    inline-size: 95%;
    margin-block-end: $spacing-09;
    padding-block-start: 0;
    padding-inline: $spacing-05;

    ::slotted(span) {
      color: $link-primary;
    }

    ::slotted(h1) {
      display: none;
    }
  }

  :host(#{$c4d-prefix}-leadspace-heading[type-style='fluid-heading-05']) {
    @include type-style(fluid-heading-05, true);
  }

  :host(#{$c4d-prefix}-leadspace-heading[type-style='display-01']) {
    @include type-style(display-01, true);
  }

  :host(#{$c4d-prefix}-leadspace)[size='super'] {
    @include breakpoint(lg) {
      .#{$c4d-prefix}--leadspace--content__container {
        min-block-size: 38rem;
      }
    }

    .#{$c4d-prefix}--leadspace__section {
      @include breakpoint(lg) {
        min-block-size: 40rem;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace)[size='medium'] {
    @include breakpoint(lg) {
      .#{$c4d-prefix}--leadspace--content__container {
        min-block-size: 28rem;
      }
    }

    ::slotted(#{$c4d-prefix}-leadspace-heading) {
      @include breakpoint(lg) {
        margin-block-end: $spacing-10;
      }
    }

    .#{$c4d-prefix}--leadspace__section {
      @include breakpoint(lg) {
        min-block-size: 30rem;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace)[size='short'] {
    @include breakpoint(lg) {
      .#{$c4d-prefix}--leadspace__overlay {
        min-block-size: 20rem;
      }
    }

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

      @include breakpoint(lg) {
        margin-block-end: $spacing-10;
      }
    }

    .#{$c4d-prefix}--leadspace__section {
      @include breakpoint(lg) {
        min-block-size: 20rem;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace)[size='tall'],
  :host(#{$c4d-prefix}-leadspace)[size='super'] {
    ::slotted(#{$c4d-prefix}-leadspace-heading) {
      @include breakpoint(lg) {
        margin-block-end: $spacing-12;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace)[size='tall'] {
    @include breakpoint(lg) {
      .#{$c4d-prefix}--leadspace--content__container {
        min-block-size: 33rem;
      }
    }

    .#{$c4d-prefix}--leadspace__section {
      block-size: auto;
      min-block-size: 35rem;
    }
  }

  :host-context(#{$c4d-prefix}-leadspace[size='short']) {
    @include breakpoint(lg) {
      .#{$prefix}--image__img {
        object-position: left top;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace-image),
  .#{$c4d-prefix}--leadspace .#{$prefix}--image {
    @include ratio-base(4, 3, false);

    @include breakpoint(md) {
      @include ratio-base(16, 9, false);
    }

    @include breakpoint(lg) {
      position: absolute;
      display: block;
      padding: 0;
      inline-size: 100%;
      inset-block-start: 0;
      inset-inline-start: 0;

      .#{$prefix}--image__img {
        display: block;
        object-fit: cover;
        object-position: 50% 50%;
      }
    }

    @media print {
      display: none;
      visibility: hidden;
    }
  }
}