/**
 * 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 '@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 '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../internal/content-block';
@use '../leadspace-block';

@mixin leadspace-with-search {
  :host(#{$c4d-prefix}-leadspace-with-search) {
    position: relative;
    display: block;

    .#{$prefix}--content-layout {
      position: relative;
      padding: $spacing-07 0 $spacing-07;

      &::before {
        position: absolute;
        z-index: -1;
        background-color: $background;
        block-size: 100%;
        content: '';
        inline-size: 100vw;
        inset-inline-end: calc(50% - 50vw);
      }

      @include breakpoint(md) {
        padding: $spacing-07 0 $spacing-09;
      }

      @include breakpoint(xlg) {
        padding: $spacing-09 0;
      }

      &-g10 {
        @include theme($g10, true);
      }

      &-g90 {
        @include theme($g90, true);
      }

      &-g100 {
        @include theme($g100, true);
      }
    }

    .#{$prefix}--search-container {
      position: relative;
      z-index: 11;
      padding-block-end: $spacing-10;
      transform: translateY(0);
      transition-duration: 0s;
      transition-property: transform;
      transition-timing-function: motion(entrance, productive);

      @include breakpoint-down(md) {
        margin: 0 $spacing-05;
      }

      @include breakpoint(md) {
        padding-block-end: $spacing-12;
      }

      &-dual-theme {
        padding: $spacing-07 0;

        @include breakpoint(md) {
          padding: $spacing-09 0;
        }
      }

      .#{$prefix}--sticky-header {
        @include type-style('heading-01');

        display: none;
        align-self: center;
      }

      &::before {
        position: absolute;
        z-index: -1;
        background-color: $background;
        block-size: 100%;
        content: '';
        inline-size: 100vw;
        inset-block-start: 0;
        inset-inline-end: calc(50% - 50vw);
      }
    }

    ::slotted(#{$c4d-prefix}-leadspace-heading) {
      color: $text-primary;
      margin-block-end: 0;
      max-inline-size: to-rem(640px);
      padding-inline-start: 0;

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

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

    ::slotted(#{$c4d-prefix}-search-with-typeahead) {
      @include breakpoint(md) {
        inline-size: calc(75% - $spacing-07);
        margin-inline-start: $spacing-05;
      }

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

    ::slotted(#{$c4d-prefix}-hr) {
      position: relative;
      margin: 0 calc(50% - 50vw);
      background: $layer-accent-01;
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='white-and-g10']) {
    .#{$prefix}--search-layout {
      @include theme($white, true);
    }

    .#{$prefix}--search-container {
      @include theme($g10, true);
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g10-and-white']) {
    .#{$prefix}--content-layout {
      @include theme($g10, true);
    }

    .#{$prefix}--search-container {
      @include theme($white, true);
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g90-and-g100']) {
    .#{$prefix}--content-layout {
      @include theme($g90, true);
    }

    .#{$prefix}--search-container {
      @include theme($g100, true);
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g100-and-g90']) {
    .#{$prefix}--content-layout {
      @include theme($g100, true);
    }

    .#{$prefix}--search-container {
      @include theme($g90, true);
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search[sticky-search]) {
    .#{$prefix}--search-container {
      position: fixed;
      padding: $spacing-05 0;
      margin: 0;
      inline-size: 100%;
      inset-block-start: 0;
      inset-inline-start: 0;
      transform: translateY(-100%);
    }

    .#{$prefix}--search-container-inner {
      @include make-container;
      @include make-row;

      margin-inline: auto;
    }

    .#{$prefix}--sticky-header {
      @include breakpoint(lg) {
        @include make-col(4, 16);
      }
    }

    ::slotted(#{$c4d-prefix}-search-with-typeahead) {
      @include make-col(4, 4);

      @include breakpoint(lg) {
        @include make-col(10, 16);
      }
    }
  }

  :host(
      #{$c4d-prefix}-leadspace-with-search[sticky-search][scroll-behavior]:not(
          [dual-theme]
        )
    ) {
    .#{$prefix}--search-container {
      &::before {
        border-block-end: 1px solid $layer-accent-01;
      }
    }
  }

  :host(#{$c4d-prefix}-leadspace-with-search-copy) {
    @extend :host(#{$c4d-prefix}-content-block-paragraph);
    @include type-style('fluid-heading-03', true);

    display: block;
    margin-block-end: 0;
    max-inline-size: to-rem(640px);
    padding-block-start: $spacing-07;

    @include breakpoint(md) {
      inline-size: calc(75% - #{$spacing-07});
      padding-inline-end: $spacing-05;
    }

    @include breakpoint(lg) {
      inline-size: calc(100% - #{$spacing-07});
      padding-inline-end: $spacing-05;
    }

    // !important required to override slotted styling from block-content component
    @include breakpoint-down(md) {
      padding-block-start: $spacing-06;
    }
  }
}