/**
 * 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.
 */

/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace"
@warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`';
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../../components/leadspace';

$btn-min-width: 26;

@mixin gradient($color) {
  .#{$c4d-prefix}--leadspace--gradient {
    background-color: rgba($color, 0.75);
  }

  @include breakpoint(md) {
    .#{$c4d-prefix}--leadspace--gradient {
      @include breakpoint(md) {
        background-color: transparent;
        background-image: linear-gradient(
          to right,
          rgba($color, 0.95),
          transparent 75%
        );
      }
    }

    .#{$c4d-prefix}--leadspace--centered {
      &__gradient {
        background: linear-gradient(
          to bottom,
          $color,
          rgba($color, 0.8),
          rgba($color, 0.6),
          transparent 80%
        );
      }
    }
  }
}

// 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;

  @include buttongroup;

  background-color: $background;

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

  .#{$c4d-prefix}--leadspace__title,
  .#{$c4d-prefix}--leadspace__desc,
  .#{$c4d-prefix}--leadspace--centered__title,
  .#{$c4d-prefix}--leadspace--centered__desc {
    color: $text-primary;
  }
  .#{$c4d-prefix}--leadspace--centered__desc {
    inline-size: 100%;
  }

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

  @if $theme == dark {
    @include gradient($cds--gradient-dark);
  } @else {
    @include gradient($cds--gradient-light);
  }
}

@mixin leadspace {
  .#{$c4d-prefix}--leadspace {
    &--content__container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      block-size: 100%;
    }

    .#{$c4d-prefix}--image {
      position: absolute;
      block-size: 100%;
      inline-size: 100%;
      inset-block-start: 0;
    }

    &__image {
      block-size: 100%;
      inline-size: 100%;
      object-fit: cover;
    }

    &__container {
      position: relative;
    }

    &__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: $spacing-05;
    }

    .#{$c4d-prefix}--leadspace__title {
      margin-block-end: $spacing-09;
      padding-block-start: 0;
      @include type-style(display-01, true);
    }

    &__title {
      inline-size: 95%;
      padding-inline-start: $spacing-05;
    }

    &__desc {
      @include make-col-ready;
    }

    &__row {
      @include make-row;
    }

    .#{$prefix}--btn {
      min-inline-size: to-rem($btn-min-width * 8px);
    }

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

    @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--productive .#{$c4d-prefix}--leadspace__title {
    @include type-style(fluid-heading-06, true);
  }

  @include breakpoint(md) {
    .#{$c4d-prefix}--leadspace {
      position: relative;
      block-size: 0;
      margin-inline: auto;
      padding-block-start: aspect-ratio(672px, 400px);

      &__container {
        position: absolute;
        overflow: hidden;
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
      }

      &__overlay {
        position: absolute;
        block-size: 100%;
        inset-block-start: 0;
        padding-block: $spacing-07;
      }

      .#{$c4d-prefix}--image {
        block-size: auto;
      }

      .#{$c4d-prefix}--leadspace__title {
        @include make-col(7, 8);

        flex-shrink: 1;
      }

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

  @include breakpoint(lg) {
    .#{$c4d-prefix}--leadspace {
      padding-block-start: aspect-ratio(1056px, 480px);

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

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

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

  @include breakpoint(xlg) {
    .#{$c4d-prefix}--leadspace {
      padding-block-start: aspect-ratio(1312px, 560px);
    }
  }

  @include breakpoint(max) {
    .#{$c4d-prefix}--leadspace {
      padding-block-start: aspect-ratio(1584px, 640px);
    }
  }
}

@mixin leadspace-centered {
  .#{$c4d-prefix}--leadspace--centered {
    margin-inline: auto;
    max-inline-size: 99rem;

    &--content__container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-inline-start: $spacing-05;
      @include make-col-ready;
      @include make-col(4, 4);
    }

    &--mobile__image {
      block-size: $spacing-13;
      inline-size: 100%;

      img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
      }
    }

    &__content {
      @include make-row;
    }

    &__desc {
      inline-size: 95%;
      @include type-style(fluid-heading-03, true);
    }

    &__title {
      @include type-style(fluid-heading-05, true);
    }

    &__desc,
    &__title {
      padding-block-start: $spacing-07;
    }

    @include themed-items;
  }

  @include breakpoint(md) {
    .#{$c4d-prefix}--leadspace--centered {
      &__overlay {
        padding-block-end: $spacing-13;
      }

      &--content__container {
        margin: auto;
        padding-inline-start: $spacing-06;
        @include make-col(4, 8);
      }

      &__image {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
      }

      &__title,
      &__desc {
        max-inline-size: to-rem(640px);
      }

      &__desc {
        padding-block-start: $spacing-09;
      }

      &--mobile__image {
        display: none;
      }
    }

    .#{$c4d-prefix}--leadspace--centered__image
      .#{$c4d-prefix}--leadspace--centered__overlay {
      padding-block-end: to-rem(256px);
    }
  }

  @include breakpoint(lg) {
    .#{$c4d-prefix}--leadspace--centered {
      &__title {
        padding-block-start: $spacing-10;
      }

      &__content {
        margin: auto;
        inline-size: 50%;
      }
    }
  }
  .#{$c4d-prefix}--leadspace--centered--g100,
  .#{$c4d-prefix}--leadspace--centered--g90 {
    @include theme(
      $g100,
      feature-flag-enabled('enable-css-custom-properties')
    ) {
      @include themed-items(dark);
    }
  }
}