/**
 * Copyright IBM Corp. 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/theme' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/utilities';
@use '../../global/styles/project-settings' as *;
@use '../../global/styles/mixins' as *;

$block-class__next: #{$pkg-prefix}--tearsheet__next;
$motion-duration: $duration-moderate-02;

/// Experimental tearsheet styles
@include block-wrap($block-class__next) {
  // ──────────────────────────────────────────────────────────────
  // Container
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__container {
    align-self: flex-end;
    border: 1px solid $border-subtle-01;
    block-size: 100%;
    inset-block-start: auto;
    max-block-size: calc(100% - var(--tearsheet-vertical-gap, #{$spacing-09}));
  }
  &:not(.#{$block-class__next}--stack-activated.is-visible) {
    .#{$block-class__next}__container {
      @include breakpoint-down(md) {
        max-block-size: none;
      }
    }
  }

  &:not(.is-visible) {
    &.#{$block-class__next}.#{$block-class__next}
      .#{$block-class__next}__container {
      transform: translate3d(0, calc(min(95vh, 500px)), 0);
    }
  }
  &.#{$block-class__next}.#{$block-class__next}--has-ai-label {
    .#{$block-class__next}__container {
      border: 1px solid transparent;

      /* override carbon ai removing background gradient */
      background:
        linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box,
        linear-gradient(
            to bottom,
            var(--cds-ai-border-start, #78a9ff),
            var(--cds-ai-border-end, #d0e2ff)
          )
          border-box,
        linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
      border-block-end: 0;
      box-shadow: 0 4px 10px 2px $ai-drop-shadow;
    }
    .#{$block-class__next}__main-content {
      position: relative;
      @include utilities.ai-popover-gradient('default', 0, 'background');

      box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
    }
  }

  // Extra specificity to override Carbon default transition
  &.#{$block-class__next}.#{$block-class__next}
    .#{$block-class__next}__container {
    transition:
      transform $motion-duration motion(entrance, expressive),
      max-block-size $motion-duration motion(entrance, expressive);
  }

  // Wide variant at medium breakpoint
  @include breakpoint(md) {
    &.#{$block-class__next}--wide .#{$block-class__next}__container {
      inline-size: calc(100% - (2 * #{$spacing-10}));
    }
  }

  // ──────────────────────────────────────────────────────────────
  // Header
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__header {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    border-block-end: 1px solid $border-subtle-01;
    margin-block: 0;
    max-block-size: 50vh;
    padding-block-end: 0;
    padding-block-start: $spacing-06;
    padding-inline: $spacing-07;

    > * {
      flex-basis: 100%;
    }
    // change if carbon provide flexible close button
    > *:not(
        .#{$block-class__next}__navigation-bar,
        .#{$block-class__next}__header-content-wrapper,
        .#{$carbon-prefix}--modal-close-button
      ) {
      margin-block-end: $spacing-06;
    }

    @include breakpoint-down(md) {
      padding-inline: $spacing-05;
    }
  }
  .#{$carbon-prefix}--modal-container--sm .#{$carbon-prefix}--modal-header {
    padding-inline-end: $spacing-07;
  }

  // ──────────────────────────────────────────────────────────────
  // Header content wrapper (grid on desktop → flex on mobile)
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__header-content-wrapper {
    display: grid;
    flex-basis: unset;
    gap: $spacing-05;
    grid-template-columns: minmax(auto, 40rem) minmax(
        var(--tearsheet-header-title-grid-width, 0),
        1fr
      );

    inline-size: calc(100% - var(--tearsheet-header-action-offset));

    @include breakpoint-down(md) {
      display: flex;
      flex-direction: column;
    }
  }

  // Header content and actions
  .#{$block-class__next}__header-content,
  .#{$block-class__next}__header-actions {
    margin-block-end: $spacing-06;
  }

  // Label, title, description styles
  .#{$block-class__next}__header-label {
    @include type.type-style('label-01');

    color: $text-secondary;
    margin-block-end: $spacing-02;
  }

  .#{$block-class__next}__header-title {
    @include type.type-style('heading-04');

    @include breakpoint-down(md) {
      @include type.type-style('heading-03');
    }

    display: flex;
    align-items: flex-start;
    margin-block-end: $spacing-03;

    svg {
      flex-shrink: 0;
    }
    .#{$block-class__next}__title-start {
      margin-inline-end: $spacing-05;
    }
    .#{$block-class__next}__title-end {
      margin-inline-start: $spacing-05;
    }
  }

  .#{$block-class__next}__header-description {
    @include type.type-style('body-compact-01');
  }

  .#{$block-class__next}__header--no-close-icon {
    display: none;
  }

  // ──────────────────────────────────────────────────────────────
  // Navigation bar inside header
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__navigation-bar {
    position: relative;
    // margin: $spacing-04 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-10;
    max-inline-size: 100%;
    min-block-size: $spacing-08;

    .#{$block-class__next}__scroller-container {
      position: absolute;
      inset-block-end: $spacing-01;
      inset-inline-end: calc(-#{$spacing-07} + #{$spacing-01});
      @include breakpoint-down(md) {
        inset-inline-end: -$spacing-05;
      }

      .#{$block-class__next}__scroller-button-icon-collapsed {
        transform: rotate(-180deg);
      }
    }

    .#{$carbon-prefix}--tabs {
      margin-inline-start: -$spacing-05;
    }
  }

  // ──────────────────────────────────────────────────────────────
  // Header actions
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__header-actions {
    display: flex;
    justify-content: flex-end;
  }

  .#{$block-class__next}__content__header-actions {
    display: flex;
    overflow: hidden;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    block-size: $spacing-07;
    inline-size: 100%;
    margin-block-start: -14px;

    > *.#{$block-class__next}__header-action-item:not([data-hidden='true']) {
      margin-inline-end: $spacing-03; /* space between visible items */
    }

    /* Remove margin on the last visible item */
    > *.#{$block-class__next}__header-action-item:not(
        [data-hidden='true']
      ):nth-last-child(2) {
      margin-inline-end: 0;
    }

    > * {
      flex-shrink: 0;
    }
    @include breakpoint-down(md) {
      justify-content: flex-start;
      margin-inline-end: 0;
    }
  }
  &.#{$block-class__next}--narrow {
    .#{$block-class__next}__header {
      padding-inline: $spacing-05;
    }
    .#{$block-class__next}__header.#{$block-class__next}__header-collapsed {
      .#{$block-class__next}__header-actions {
        display: none;
      }
    }
    .#{$block-class__next}__header-content-wrapper {
      display: flex;
      flex-direction: column;
    }
    .#{$block-class__next}__header-title {
      @include type.type-style('heading-03');
    }
    .#{$block-class__next}__content__header-actions {
      justify-content: flex-start;
      margin-inline-end: 0;
    }
    .#{$block-class__next}__body {
      grid-template-columns: 1fr 0;
    }
    .#{$block-class__next}__influencer,
    .#{$block-class__next}__main-content,
    .#{$block-class__next}__summary-content {
      &:not(.#{$block-class__next}__flush) {
        padding-inline: $spacing-05;
      }
    }
  }
  // ──────────────────────────────────────────────────────────────
  // Header (default vs collapsed)
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__header {
    // Animate all non-core visible elements
    > *:not(
        .#{$block-class__next}__navigation-bar,
        .#{$block-class__next}__header-content-wrapper,
        .#{$carbon-prefix}--modal-close-button,
        .excludeFromCollapse
      ) {
      overflow: hidden;
      max-block-size: 50vh; // large enough for expanded content
      opacity: 1;
      transition:
        max-block-size $motion-duration motion(entrance, expressive),
        opacity $motion-duration motion(entrance, expressive),
        margin $motion-duration motion(entrance, expressive),
        padding $motion-duration motion(entrance, expressive);
    }

    .#{$block-class__next}__header-actions,
    .#{$block-class__next}__header-content-wrapper
      .#{$block-class__next}__header-content
      *:not(
        .#{$block-class__next}__content__title-wrapper,
        .#{$block-class__next}__header-label
      ) {
      opacity: 1;
      transition:
        all $motion-duration motion(entrance, expressive),
        opacity $motion-duration motion(entrance, expressive);
    }
  }

  // COLLAPSED STATE
  .#{$block-class__next}__header-collapsed {
    padding-block-start: $spacing-04;
    transition: padding $motion-duration motion(entrance, expressive);

    // Collapse everything except core elements
    > *:not(
        .#{$block-class__next}__navigation-bar,
        .#{$block-class__next}__header-content-wrapper,
        .#{$carbon-prefix}--modal-close-button,
        .excludeFromCollapse
      ),
    .#{$block-class__next}__header-actions
      > *:not(.#{$block-class__next}__content__header-actions),
    .#{$block-class__next}__header-content
      > *:not(.#{$block-class__next}__content__title-wrapper),
    > *:not(
        .#{$block-class__next}__navigation-bar,
        .#{$block-class__next}__header-content-wrapper,
        .#{$carbon-prefix}--modal-close-button,
        .excludeFromCollapse
      )
      *,
    .#{$block-class__next}__header-content-wrapper
      .#{$block-class__next}__header-content
      > *:not(.#{$block-class__next}__content__title-wrapper)
      * {
      overflow: hidden;
      padding: 0;
      margin: 0;
      max-block-size: 0;
      opacity: 0;
      pointer-events: none;
      transition: all $motion-duration motion(entrance, expressive);
    }

    // Header title
    .#{$block-class__next}__header-title {
      @include type.type-style('label-02');

      align-items: center;
      margin-block-start: $spacing-02;
      transition: all $motion-duration motion(entrance, expressive);

      > span {
        display: flex;
        align-items: center;
        block-size: $spacing-06;
      }
    }

    .#{$block-class__next}__header-content {
      align-self: center;
      margin-block-end: 0;
    }

    .#{$block-class__next}__content__header-actions {
      margin-block-start: -$spacing-01;
    }

    // Hide header actions on small screens
    @include breakpoint-down(md) {
      .#{$block-class__next}__header-actions {
        display: none;
      }
    }

    // Normalize visible elements
    .#{$block-class__next}__header-content-wrapper,
    .#{$block-class__next}__header-content,
    .#{$block-class__next}__content__title-wrapper,
    .#{$block-class__next}__header-actions,
    .#{$block-class__next}__header-title {
      margin-block: 0;
      transition: margin-block $motion-duration ease;
    }

    .#{$block-class__next}__header-content-wrapper {
      min-block-size: $spacing-08;
      padding-block-end: $spacing-04;
    }

    // Divider line above navigation bar
    .#{$block-class__next}__navigation-bar::before {
      position: absolute;
      z-index: 1;
      background: rgba(0, 0, 0, 0.12);
      block-size: 1px;
      content: '';
      inline-size: 100vw;
      inset-block-start: -$spacing-02;
      inset-inline-start: 50%;
      pointer-events: none;
      transform: translateX(-50%);
    }
  }

  // ──────────────────────────────────────────────────────────────
  // Body layout grid
  // ──────────────────────────────────────────────────────────────
  .#{$block-class__next}__body-layout {
    display: grid;
    grid-template-areas:
      'influencer body'
      'influencer footer';
    grid-template-columns:
      var(--tearsheet-influencer-width, calc($spacing-10 * 4))
      1fr;
    grid-template-rows: 1fr auto;
    padding-block: 0;
    padding-inline-end: 0;

    /* Redefine grid when influencer is absent */
    &:not(:has(> .#{$block-class__next}__influencer)) {
      grid-template-areas:
        'body'
        'footer';
      grid-template-columns: 1fr;
    }
  }

  /* Assign components to their named grid areas */
  .#{$block-class__next}__influencer {
    border-inline-end: 1px solid $border-subtle-01;
    grid-area: influencer;
  }

  .#{$block-class__next}__body {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-area: body;
    grid-template-columns: 1fr var(
        --tearsheet-summary-content-width,
        calc($spacing-10 * 4)
      );
    @include breakpoint-down(md) {
      grid-template-columns: 1fr 0;
    }

    > *:only-child {
      grid-column: 1 / -1;
    }
  }

  .#{$block-class__next}__footer {
    border-block-start: 1px solid $border-subtle-01;
    grid-area: footer;
  }

  .#{$block-class__next}__influencer,
  .#{$block-class__next}__main-content,
  .#{$block-class__next}__summary-content {
    overflow: auto;
    &:not(.#{$block-class__next}__flush) {
      padding-inline: $spacing-07;
      @include breakpoint-down(md) {
        padding-inline: $spacing-05;
      }
    }
  }

  .#{$block-class__next}__main-content {
    position: relative;
  }
  .#{$pkg-prefix}--side-panel {
    position: absolute;
    z-index: 9999;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0;
    max-inline-size: none;
    .#{$pkg-prefix}--side-panel__header {
      min-block-size: 0;
    }
  }

  &.#{$block-class__next}--stack-activated.is-visible {
    --overlay-color: #{$overlay};
    --overlay-alpha: 0.5;

    z-index: calc(#{utilities.z('modal')} - var(--stack-depth, 0));

    background-color: initial;

    &::before {
      position: absolute;
      display: block;
      background: var(--overlay-color);
      content: '';
      inset: 0;
      opacity: calc(var(--overlay-alpha) - var(--stack-depth) * 0.1);

      transition:
        background-color $motion-duration motion(exit, expressive),
        opacity $motion-duration motion(exit, expressive);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &.is-visible {
      .#{$block-class__next}__container {
        max-block-size: calc(
          100% - var(--tearsheet-vertical-gap, #{$spacing-09}) +
            var(--block-size-change)
        );
        transform: scaleX(var(--scale-factor));
      }
    }
  }
}