//
// Copyright IBM Corp. 2020, 2023
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

// Other Carbon settings.
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/grid/flexbox';
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type';
@use '@carbon/styles/scss/utilities';

// Standard imports.
@use '../../global/styles/project-settings' as *;
@use '../../global/styles/mixins' as *;

// PageHeader uses the following IBM Products components:
// ActionBar, BreadcrumbWithOverflow, TagSet, ButtonSetWithOverflow
@use '../ActionBar/action-bar';
@use '../BreadcrumbWithOverflow/breadcrumb-with-overflow';
@use '../TagSet/tag-set';
@use '../ButtonSetWithOverflow/button-set-with-overflow';

$block-class: #{$pkg-prefix}--page-header;
$breadcrumb-block-class: #{$pkg-prefix}--breadcrumb-with-overflow;

$raised-z-index: 99;
$z-index-header-minus: utilities.z('header') - 1;

$left-section-std-width: 60%;
$right-section-std-width: 100% - $left-section-std-width;
$left-section-alt-width: 75%;
$right-section-alt-width: 100% - $left-section-alt-width;

$animation: background-appear;
// This transitions the background-color between from-color and to-color
$duration: 1000ms;

@keyframes background-appear {
  from {
    /* stylelint-disable-next-line carbon/theme-use */
    background-color: var(--from-color);
  }

  to {
    /* stylelint-disable-next-line carbon/theme-use */
    background-color: var(--to-color);
  }
}
@keyframes background-and-shadow-appear {
  from {
    /* stylelint-disable-next-line carbon/theme-use */
    background-color: var(--from-color);
    /* stylelint-disable-next-line carbon/theme-use */
    box-shadow: 0 1px 0 var(--from-color);
  }

  to {
    /* stylelint-disable-next-line carbon/theme-use */
    background-color: var(--to-color);
    /* stylelint-disable-next-line carbon/theme-use */
    box-shadow: 0 1px 0 var(--to-color-shadow);
  }
}

@mixin appearingBackground(
  $with-shadow: false,
  $from-color: $background,
  $to-color: $layer-01,
  $to-color-shadow: $layer-accent-01
) {
  // stylelint-disable-next-line carbon/theme-use
  --from-color: #{$from-color};
  // stylelint-disable-next-line carbon/theme-use
  --to-color: #{$to-color};
  // stylelint-disable-next-line carbon/theme-use
  --to-color-shadow: #{$to-color-shadow};

  position: absolute;
  display: block;

  /* stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use -- non-standard duration used */
  animation: $animation $duration linear paused forwards;
  // Added separately for clarity
  animation-delay: calc(
    -1 * $duration * var(--#{$block-class}--background-opacity)
  );
  block-size: 100%;
  content: '';
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;

  @if $with-shadow {
    $animation: background-and-shadow-appear;
  }
}

@include block-wrap($block-class) {
  &.#{$block-class} {
    /* Bleed class for the background */
    position: sticky;
    /* z-index used to raise above any position relative content as per Carbon header */
    /* dropped  1 below Carbon header so as not to overlay the side panel */
    z-index: $z-index-header-minus;
    display: inline-block; /* cause top/bottom margin to reserve space */
    background-color: $background;
    border-block-end: 1px solid $border-subtle-00;
    color: $text-primary;
    inline-size: 100%;
    /* stylelint-disable-next-line carbon/layout-use */
    inset-block-start: var(--#{$block-class}--header-top);

    /* custom props */
    --#{$block-class}--breadcrumb-title-visibility: hidden;
    --#{$block-class}--breadcrumb-title-opacity: 1;
    --#{$block-class}--breadcrumb-top: 0; //1
    --#{$block-class}--background-opacity: 1;
    --#{$block-class}--breadcrumb-title-top: initial;
    --#{$block-class}--button-set-in-breadcrumb-width-px: initial;
  }

  &.#{$block-class}--without-background {
    border-block-end: none;
  }

  &::before {
    @include appearingBackground(true);

    z-index: -1;
  }

  .#{$block-class}--width--xl {
    padding-inline: $spacing-07;
  }

  .#{$block-class}__breadcrumb-row {
    position: sticky;
    z-index: $raised-z-index;
    inset-block-start: var(--#{$block-class}--breadcrumb-top); //2
    min-block-size: $spacing-08;

    + .#{$block-class}__last-row-buffer--active {
      block-size: $spacing-02;
    }
  }

  .#{$block-class}__breadcrumb-row:not(
      .#{$block-class}__breadcrumb-row--has-action-bar
    ) {
    // lifts up page title when there is no action bar
    min-block-size: $spacing-08;
  }

  .#{$block-class}__breadcrumb-row--container {
    display: flex;
    flex-wrap: nowrap;
    min-inline-size: 100%;
  }

  .#{$block-class}__has-page-actions-without-action-bar {
    max-inline-size: calc(0.6 * (100% + 2 * #{$spacing-05}));
    // NOTE: the extra spacing accounts for carbon margins
    min-inline-size: calc(0.6 * (100% + 2 * #{$spacing-05}));
  }

  .#{$block-class}__has-page-actions-with-title-collapsed {
    max-inline-size: none;
  }

  .#{$block-class}__has-page-actions-without-action-bar
    .#{$block-class}__has-page-actions-without-action-bar {
    min-inline-size: 100%;
  }

  .#{$block-class}__breadcrumb-row--has-action-bar
    .#{$block-class}__breadcrumb-row--container {
    min-inline-size: calc(
      100% +
        (
          var(--#{$block-class}--width-px) - var(
              --#{$block-class}--breadcrumb-row-width-px
            )
        ) /
        2
    );
  }
  .#{$block-class}__breadcrumb-row::after {
    position: absolute;
    display: block;
    block-size: 1px;
    /* creates a full width box shadow without causing scroll */
    box-shadow:
      0 1px 0 0 $layer-accent-01,
      0 1px 0 0 $layer-accent-01;
    content: '';
    inline-size: 50vw;
    inset-block-end: 0;
    inset-inline-start: 50%;
    opacity: 0;
    transform: translateX(-50%) scaleX(1);
    // stylelint-disable-next-line carbon/motion-easing-use
    transition: all $duration-moderate-01 ease-out;
  }

  .#{$block-class}__breadcrumb-row--next-to-tabs:not(
      .#{$block-class}__has-page-actions-without-action-bar
    )::after,
  .#{$block-class}__has-page-actions-without-action-bar.#{$block-class}__has-page-actions-with-title-collapsed::after,
  .#{$block-class}__breadcrumb-row--has-action-bar::after {
    /* creates a full width box shadow without causing scroll */
    box-shadow:
      25vw 1px 0 0 $layer-accent-01,
      -25vw 1px 0 0 $layer-accent-01;
    opacity: 1;
  }

  .#{$block-class}__breadcrumb-container {
    inline-size: 100%;
  }

  .#{$block-class}__action-bar-column {
    display: none;
  }

  .#{$block-class}__breadcrumb-row--has-breadcrumbs
    .#{$block-class}__action-bar-column {
    flex: 0 1 $right-section-alt-width;
    // back button displayed only
    max-inline-size: $right-section-alt-width;

    @include breakpoint(md) {
      flex: 1 0 $right-section-std-width;
      max-inline-size: $right-section-std-width;
    }
  }

  .#{$block-class}__breadcrumb-row--has-action-bar
    .#{$block-class}__action-bar-column {
    display: initial;
  }

  .#{$block-class}__action-bar-column-content {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;

    @include breakpoint-up('lg') {
      flex-wrap: nowrap; /* assume enough space */
    }
  }

  .#{$block-class}__breadcrumb-row .#{$block-class}__page-actions {
    position: relative;
    display: inline-block;
    flex: 1 1 var(--#{$block-class}--button-set-in-breadcrumb-width-px);
    inline-size: 100%;
    max-inline-size: var(--#{$block-class}--button-set-in-breadcrumb-width-px);
    opacity: 0;
    transition: opacity $duration-moderate-02 motion('entrance', 'productive');
    visibility: hidden;
    white-space: nowrap;
  }

  .#{$block-class}__breadcrumb-row
    .#{$block-class}__page-actions--in-breadcrumb {
    opacity: 1;
    visibility: visible;
  }

  .#{$block-class}__breadcrumb-column {
    overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
    flex: 0 0 100%;
    max-inline-size: 100%;

    @include breakpoint(md) {
      overflow: hidden; /* required for ellipsis in title, title not visible in breadcrumb with back arrow */
    }
  }

  .#{$block-class}__breadcrumb-row--has-action-bar.#{$block-class}__breadcrumb-row
    .#{$block-class}__breadcrumb-column {
    flex: 0 1 $left-section-alt-width;
    // back button displayed only
    max-inline-size: $left-section-alt-width;

    @include breakpoint(md) {
      flex: 0 1 $left-section-std-width;
      max-inline-size: $left-section-std-width;
    }
  }

  .#{$block-class}__has-page-actions-without-action-bar.#{$block-class}__breadcrumb-row
    .#{$block-class}__breadcrumb-column {
    flex: 0 1 100%;
    // the width of the breadcrumb column is adjusted elsewhere to compensate
    max-inline-size: 100%;
  }

  .#{$block-class}__breadcrumb-column--background,
  .#{$block-class}__action-bar-column--background {
    position: relative;
  }

  .#{$block-class}__breadcrumb-column--background::before,
  .#{$block-class}__action-bar-column--background::before {
    @include appearingBackground();
  }

  .#{$block-class}__action-bar-column--influenced-by-collapse-button {
    padding-inline-end: $spacing-08;
  }

  .#{$block-class}__breadcrumb {
    @include type.type-style('label-01');

    padding-block-start: $spacing-04;
  }

  .#{$block-class}--breadcrumb.#{$breadcrumb-block-class}__with-items {
    padding-block-start: 0;
    @include breakpoint(md) {
      padding-block-start: $spacing-04;
    }
  }

  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item {
    margin-inline-end: $spacing-02;
  }

  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item::after {
    margin-inline-start: $spacing-02;
  }

  .#{$block-class}__breadcrumb .#{$carbon-prefix}--breadcrumb-item,
  .#{$block-class}__breadcrumb
    .#{$carbon-prefix}--breadcrumb-item
    .#{$carbon-prefix}--link {
    @include type.type-style('label-01');
  }

  .#{$block-class}__breadcrumb-title {
    position: relative;

    &:not(.#{$block-class}__breadcrumb-title--pre-collapsed) {
      opacity: var(--#{$block-class}--breadcrumb-title-opacity);

      transform: translateY(var(--#{$block-class}--breadcrumb-title-top));
      visibility: var(--#{$block-class}--breadcrumb-title-visibility);
    }
  }

  .#{$block-class}__breadcrumb-container--hidden
    .#{$block-class}__breadcrumb-title.#{$block-class}__breadcrumb-title {
    overflow: initial;
  }

  .#{$block-class}__action-bar {
    flex: 1 1 var(--#{$block-class}--max-action-bar-width-px);
    inline-size: 100%;
    margin-block-start: calc(-1 * #{$spacing-04}); /* align with breadcrumb */
    max-inline-size: var(--#{$block-class}--max-action-bar-width-px);
    padding-block-start: $spacing-04;
    vertical-align: top;
    white-space: nowrap;
  }

  .#{$block-class}__title-row {
    --title-row-margin-top: #{$spacing-01}; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */

    margin-block-end: 0;
    transform: translateY(
      $spacing-01
    ); // position adjusted for editable title focus outline

    @include breakpoint-up('md') {
      flex-wrap: nowrap; /* assume enough space */
    }

    &.#{$block-class}__title-row--under-action-bar {
      margin-block-start: $spacing-05;
      transform: translateY(0); // Not needed under action bar
    }

    + .#{$block-class}__last-row-buffer--active {
      block-size: $spacing-07;
    }

    &.#{$block-class}__title-row--spacing-below-03 {
      margin-block-end: $spacing-03;
    }

    &.#{$block-class}__title-row--spacing-below-05 {
      + .#{$block-class}__last-row-buffer--active {
        block-size: $spacing-05;
      }
    }

    &.#{$block-class}__title-row--spacing-below-06 {
      margin-block-end: $spacing-06;
    }

    &.#{$block-class}__title-row--no-breadcrumb-row {
      margin-block-start: $spacing-07;
    }
  }

  &.#{$block-class}--has-navigation
    .#{$block-class}__title-row
    + .#{$block-class}__last-row-buffer--active {
    block-size: calc(#{$spacing-06});
  }

  &.#{$block-class}--has-navigation-tags-only
    .#{$block-class}__title-row
    + .#{$block-class}__last-row-buffer--active {
    block-size: calc(#{$spacing-05});
  }

  .#{$block-class}__title-row--sticky {
    position: sticky;
  }

  .#{$block-class}__breadcrumb-row--has-breadcrumbs
    + .#{$block-class}__title-row--sticky {
    // stylelint-disable-next-line carbon/layout-use
    inset-block-start: calc(
      var(--#{$block-class}--breadcrumb-top) - var(--title-row-margin-top)
    );
  }

  .#{$block-class}__title-column {
    flex: 0 0 100%;
    min-block-size: 40px;

    @include breakpoint-up('md') {
      flex: 1 0 $left-section-std-width;
      max-inline-size: $left-section-std-width;
    }
  }

  .#{$block-class}__tooltip {
    flex-basis: auto;
    min-inline-size: 0;

    button {
      border-block-end: none;
      cursor: default;
    }
  }
  .#{$block-class}__titleText {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .#{$block-class}__title {
    @include type.type-style('heading-04');

    display: flex;
    min-block-size: $spacing-08;
  }

  .#{$block-class}__title--editable {
    display: flex;
    overflow: visible;
    // move to match non-editable version position
    margin-block-start: calc(-1 * #{$spacing-01});
    margin-inline-start: calc(-1 * #{$spacing-05});
  }

  .#{$block-class}__title-skeleton {
    block-size: $spacing-07;
  }

  .#{$block-class}__title--fades {
    opacity: calc(1 - var(--#{$block-class}--breadcrumb-title-opacity));
  }

  .#{$block-class}__title-icon {
    margin-inline-end: $spacing-04;
    // stylelint-disable-next-line carbon/layout-use
    transform: translateY(
      -$spacing-01
    ); // positional tweak requested by design review

    vertical-align: middle;
  }

  .#{$block-class}__page-actions {
    flex: 0 0 100%;
    margin-block-start: $spacing-05;
    white-space: nowrap;

    @include breakpoint-up('md') {
      flex: 0 1 $right-section-std-width;
      margin-block-start: 0;
      max-inline-size: $right-section-std-width;
    }
  }

  .#{$block-class}__page-actions
    .#{$carbon-prefix}--btn-set
    .#{$carbon-prefix}--btn {
    inline-size: initial;
  }

  .#{$block-class}__action-bar-column .#{$block-class}__page-actions {
    margin-block-start: 0;
  }

  .#{$block-class}__page-actions-container {
    justify-content: flex-start;

    @include breakpoint-up('md') {
      justify-content: flex-end;
    }
  }

  .#{$block-class}__title-row .#{$block-class}__page-actions {
    position: relative;
    opacity: 1;
    transition: all $duration-fast-02 motion('entrance', 'productive');
    transition-property: opacity, visibility;
    visibility: visible;
  }

  .#{$block-class}__title-row .#{$block-class}__page-actions::before {
    @include appearingBackground();
  }

  .#{$block-class}__page-actions-content {
    position: relative; // ensure appears over ::before
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
    block-size: 100%;
    inline-size: 100%;
  }

  .#{$block-class}__title-row .#{$block-class}__page-actions--in-breadcrumb {
    opacity: 0;
    visibility: hidden;
  }

  .#{$block-class}__subtitle-row {
    margin-block-start: $spacing-03;

    @include breakpoint-up('md') {
      max-inline-size: $left-section-std-width;
    }

    + .#{$block-class}__last-row-buffer--active {
      block-size: $spacing-05;
    }
  }

  .#{$block-class}__subtitle {
    @include type.type-style('body-01');
  }

  .#{$block-class}__subtitle-tooltip .#{$carbon-prefix}--definition-term {
    border-block-end: 0;
    letter-spacing: inherit;
  }

  // overwrites the existing styles to make the popover bigger because in some cases the narrow space can be too constricting for the header
  .#{$block-class}__subtitle-tooltip
    .#{$carbon-prefix}--popover-content.#{$carbon-prefix}--definition-tooltip {
    max-inline-size: fit-content;
  }

  .#{$block-class}__subtitle-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .#{$block-class}__available-row {
    @include type.type-style('body-01');

    margin-block-start: $spacing-03;

    + .#{$block-class}__last-row-buffer--active {
      block-size: $spacing-05;
    }
  }

  .#{$block-class}__title-row + .#{$block-class}__available-row {
    margin-block-start: $spacing-05;
  }

  .#{$block-class}__available-row * {
    // default content of available row to body-long-01
    @include type.type-style('body-01');
  }

  .#{$block-class}__navigation-row {
    flex-wrap: wrap-reverse;
    margin-block-start: 0;

    .#{$carbon-prefix}--content-switcher {
      box-sizing: content-box;
      padding-block-end: $spacing-05;
    }
  }

  .#{$block-class}__navigation-row .#{$carbon-prefix}--tab-content {
    display: none; /* need to figure out how to handle the tab content */
  }

  .#{$block-class}__action-bar-column--has-page-actions {
    display: block;
  }

  .#{$block-class}__has-page-actions-with-title-collapsed
    .#{$block-class}__action-bar-column--has-page-actions {
    display: block;
  }

  .#{$block-class}__navigation-tabs {
    margin-inline-start: calc(-1 * #{$spacing-05});
  }

  .#{$block-class}__navigation-row--has-tags .#{$block-class}__navigation-tabs {
    flex: 0 1 $left-section-alt-width;
    max-inline-size: $left-section-alt-width;
  }

  .#{$block-class}__navigation-tags {
    display: flex;
    flex: 1 0 $right-section-alt-width;
    align-items: center;
    justify-content: flex-end;
    max-inline-size: $right-section-alt-width;
    padding-block: $spacing-02;
    // allow space for expand/collapse if we have a background
    padding-inline-end: $spacing-07;
    text-align: end;
    white-space: nowrap;

    @include breakpoint(md) {
      padding-inline-end: $spacing-05;
    }
  }

  .#{$block-class}__navigation-tags--tags-only {
    justify-content: flex-start;
    margin-inline-start: calc(-1 * #{$spacing-02});
    padding-block: 0 $spacing-04;
    text-align: initial;
  }

  .#{$block-class}__navigation-row .#{$carbon-prefix}--content-switcher-btn {
    background-color: $background;
  }

  .#{$block-class}__collapse-expand-toggle {
    position: absolute;
    z-index: $raised-z-index + 1;
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .#{$block-class}__collapse-expand-toggle .#{$carbon-prefix}--btn__icon {
    // transform: rotate(-90deg); // accordion does this, but it feels odd in page header
    transition: all $duration-slow-01 motion(standard, productive);
  }

  .#{$block-class}__collapse-expand-toggle--collapsed svg {
    // transform: rotate(90deg);
    transform: scaleY(-1);
  }
}

:root {
  --#{$block-class}--tagset-tooltip-offset: 0;
}

.#{$block-class}__tagset-tooltip.#{$block-class}__tagset-tooltip {
  // stylelint-disable-next-line
  position: var(--#{$block-class}--tagset-tooltip-position) !important;
  // stylelint-disable-next-line
  inset-block-start: var(--#{$block-class}--tagset-tooltip-offset) !important;
}

.#{$block-class}__navigation-tags-overflow.#{$carbon-prefix}--tooltip {
  z-index: $z-index-header-minus;
}

.#{$block-class}__action-bar-menu-options.#{$carbon-prefix}--overflow-menu-options,
.#{$carbon-prefix}--breadcrumb-menu-options.#{$carbon-prefix}--overflow-menu-options,
.#{$block-class}__button-set-menu-options.#{$carbon-prefix}--overflow-menu-options {
  z-index: $z-index-header-minus;
}

.#{$block-class}__button-set-menu-options
  > button.#{$carbon-prefix}--menu-button__trigger {
  min-inline-size: 0;
}