//
// Copyright IBM Corp. 2025, 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:math';

$css--plex: true !default;

@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/utilities/convert';
@use '@carbon/grid';
@use '@carbon/styles/scss/components/page-header/index' as *;
@use 'sass:map';

$prefix: 'c4p';
$carbon-prefix: 'cds';

:host(#{$prefix}-page-header) {
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header;
  position: sticky;
  display: block;
  background-color: $layer-01;
  border-block-end: 1px solid $border-subtle-01;
  /* custom css property used from calculation of header offset */
  /* stylelint-disable-next-line carbon/layout-use */
  inset-block-start: var(--c4p-page-header-header-top);
}

:host(#{$prefix}-page-header-breadcrumb),
:host(#{$prefix}-page-header-content),
:host(#{$prefix}-page-header-tabs) {
  @include grid.css-grid();

  display: block;
}

:host(#{$prefix}-page-header-breadcrumb) {
  position: sticky;
  z-index: 1;
  background-color: $layer-01;
  block-size: convert.to-rem(40px);
  border-block-end: $border-subtle;

  /* custom css property used from calculation of breadcrumb offset */
  /* stylelint-disable-next-line carbon/layout-use */
  inset-block-start: var(--c4p-page-header-breadcrumb-top);
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__breadcrumb-bar;
  ::slotted([slot='icon']) {
    margin-inline-end: $spacing-03;
    // TODO: remove above styles when styles from React have been migrated
    // and use the extend below
    // @extend .#{$prefix}--page-header__breadcrumb__icon;
  }

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

  // TODO: remove this section when styles from React have been migrated
  .#{$prefix}--page-header__breadcrumb-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
    inline-size: 100%;
  }

  .#{$prefix}--page-header__breadcrumb-wrapper {
    display: inline-flex;
    inline-size: 100%;
  }

  .#{$prefix}--page-header__breadcrumb__actions {
    display: inline-flex;
  }
  ///////////////////////////////
}

:host(#{$prefix}-page-header-breadcrumb:not([content-actions-flush]))
  ::slotted([slot='content-actions']) {
  //stylelint-disable declaration-no-important
  margin-inline-end: $spacing-04 !important;
}

:host(#{$prefix}-page-header-breadcrumb[page-actions-flush]) {
  .#{$carbon-prefix}--css-grid {
    margin-inline-end: 0;
    padding-inline-end: 0;
  }

  .#{$carbon-prefix}--css-grid-column {
    margin-inline-end: 0;
  }
}

:host(#{$prefix}-page-header-breadcrumb[border='true']) {
  border-block-end: 1px solid $border-subtle-01;
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below

  // @extend .#{$prefix}--page-header__breadcrumb-bar-border;
}

:host(#{$prefix}-page-header-content) {
  padding: $spacing-06 0;
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__content;

  .#{$prefix}--page-header__content__title {
    @include type-style('productive-heading-04');

    display: -webkit-box;
    overflow: hidden;
    // TODO: remove above styles when styles from React have been migrated
    // and use the extend below
    // @extend .#{$prefix}--page-header__content__title;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-inline-size: convert.to-rem(640px);
    text-overflow: ellipsis;
    white-space: normal;
  }

  .#{$prefix}--page-header__content__title-wrapper {
    // TODO: remove this section
    @include breakpoint-down(md) {
      display: flex;
      flex-direction: column;
      grid-gap: $spacing-05;
    }

    display: grid;
    gap: $spacing-05;
    ///////////////////////////////

    // overriding until the responsive behavior is implemented
    grid-template-columns: auto minmax(auto, auto);
    margin-block-end: $spacing-05;
    min-block-size: convert.to-rem(40px);
  }

  // TODO: remove this section
  .#{$prefix}--page-header__content__start {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-05;
  }

  .#{$prefix}--page-header__content__page-actions {
    display: flex;
    justify-content: right;
    /* stylelint-disable-next-line carbon/motion-easing-use */
    transition: opacity motion(standard, productive) $duration-moderate-02;

    &.#{$prefix}--page-header__content__page-actions--clipped {
      opacity: 0;
      visibility: hidden;
    }

    @include breakpoint-down('md') {
      justify-content: left;
      margin-block-start: 0;
    }
  }

  .#{$prefix}--page-header__content__title-container {
    display: flex;
  }
  ///////////////////////////////
  ::slotted([slot='icon']) {
    margin-inline-end: $spacing-05;
    // TODO: remove above styles when styles from React have been migrated
    // and use the extend below
    // @extend .#{$prefix}--page-header__content__icon;
  }

  ::slotted([slot='contextual-actions']) {
    display: flex;
    // TODO: remove above styles when styles from React have been migrated
    // and use the extend below
    // @extend .#{$prefix}--page-header__content__contextual-actions;
  }
}

:host(#{$prefix}-page-header-content[contextual-actions]) {
  .#{$prefix}--page-header__content__title {
    -webkit-line-clamp: 1;
  }
}

:host(#{$prefix}-page-header-content[contextual-actions]) {
  .#{$prefix}--page-header__content__title {
    -webkit-line-clamp: 1;
  }
}

:host(#{$prefix}-page-header-content-text) {
  @include type-style('body-01');
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__content__body;
  display: block;
  margin-block-start: $spacing-05;
  max-inline-size: convert.to-rem(640px);

  .#{$prefix}--page-header__content__subtitle {
    @include type-style('productive-heading-03');

    margin-block-end: $spacing-03;
    // TODO: remove above styles when styles from React have been migrated
    margin-block-start: 0;
  }
}

:host(#{$prefix}-page-header-hero-image) {
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__hero-image;
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  block-size: 100%;
}

:host(#{$prefix}-page-header-hero-image)::before {
  block-size: 0;
  content: '';
  float: inline-start;
  inline-size: 1px;
  margin-inline-start: -1px;

  padding-block-start: math.percentage(math.div(2, 3));

  @include grid.breakpoint-up('lg') {
    padding-block-start: math.percentage(math.div(1, 2));
  }
}

:host(#{$prefix}-page-header-hero-image)::after {
  display: table;
  clear: both;
  content: '';
}

:host(#{$prefix}-page-header-tabs) {
  margin-inline-start: -$spacing-05;
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__tab-bar;
}

:host(#{$prefix}-page-header-tabs) .#{$prefix}--page-header__tab-bar--tablist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  inline-size: 100%;
}

:host(#{$prefix}-page-header-tabs) ::slotted([slot='tags']) {
  display: flex;
  align-items: center;
  justify-content: right;
  inline-size: 100%;
  max-inline-size: 500px;
  // TODO: remove above styles when styles from React have been migrated
  // and use the extend below
  // @extend .#{$prefix}--page-header__tags;
}

:host(#{$prefix}-page-header-tabs) ::slotted([slot='scroller']) {
  position: absolute;
  inset-inline-end: 0;
}

:host(#{$prefix}-page-header-breadcrumb),
:host(#{$prefix}-page-header-content),
:host(#{$prefix}-page-header-tabs) {
  .#{$carbon-prefix}--css-grid {
    inline-size: initial;
  }
}

#{$carbon-prefix}-definition-tooltip::part(definition-term) {
  border: none;
}

:host(#{$prefix}-page-header-tabs) ::slotted(#{$carbon-prefix}-tabs) {
  --tabs-overflow-button-background: $layer-01;
}

@keyframes page-header-title-breadcrumb-animation {
  0% {
    opacity: 0;
    transform: translateY($spacing-05);
  }

  5% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-header-title-breadcrumb-animation-reduced-motion {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

// Target browsers that do not yet support animation-timeline: scroll()
@mixin scroll-fallback {
  @supports not (animation-timeline: scroll()) {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    transform: translateY(0);
    /* stylelint-disable-next-line */
    transition: opacity motion(standard, productive) $duration-moderate-01;
  }
}

@mixin scroll-animation {
  @supports (animation-timeline: scroll()) {
    // Show by default should not have any animation, this means
    // there was not a page header content element provided
    animation-direction: alternate;
    animation-duration: 1ms; /* Firefox requires this to apply the animation */
    animation-name: page-header-title-breadcrumb-animation;
    animation-timeline: scroll(block nearest);

    @media (prefers-reduced-motion: reduce) {
      animation-name: page-header-title-breadcrumb-animation-reduced-motion;
      transform: translateY(0);
    }
  }
}

:host(
  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__fallback
) {
  @include scroll-fallback();
}

:host(#{$prefix}-page-header-breadcrumb)
  .#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions {
  opacity: 0;
  visibility: hidden;
  &.#{$prefix}--page-header__breadcrumb__content-actions-with-global-actions--show {
    opacity: 1;
    transform: translateY(0);
    transition:
    /* stylelint-disable-next-line */ opacity
      motion(standard, productive) $duration-moderate-01;
    visibility: visible;
  }
}

:host(#{$prefix}-page-header-title-breadcrumb) {
  opacity: 0;
  transform: translateY($spacing-05);
  transition:
    /* stylelint-disable-next-line */
    transform motion(standard, productive) $duration-moderate-01,
    opacity motion(standard, productive) $duration-moderate-01;
}

:host(
  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__with-content
) {
  // Target browsers that do not yet support animation-timeline: scroll()
  &.#{$prefix}--page-header-title-breadcrumb-show__fallback {
    @supports not (animation-timeline: scroll()) {
      @include scroll-fallback();

      @media (prefers-reduced-motion: reduce) {
        transform: translateY(0);
        /* stylelint-disable-next-line */
        transition: opacity motion(standard, productive) $duration-moderate-01;
      }
    }
  }
  // `animation-timeline: scroll()` only currently supported in Chromium based browsers
  @include scroll-animation();
}

:host(
  #{$prefix}-page-header-title-breadcrumb.#{$prefix}--page-header-title-breadcrumb-show__by-default
) {
  opacity: 1;
  transform: translateY(0);
}