/* stylelint-disable declaration-property-unit-blacklist */
@import '../../vendor/carbon-components/scss/globals/scss/vars';
@import '../../vendor/carbon-components/scss/globals/scss/typography';

@mixin condensed-style() {
  @include make-sticky();
  background: rgba($ui-01, var(--scroll-transition-progress));
  border-bottom: 1px solid rgba($ui-03, var(--scroll-transition-progress));
  transition: all $duration--fast-02;
}

@mixin make-sticky() {
  position: sticky;
  top: var(--header-offset);
}

/* Modifier classes are applied to the root element only
  .page-title-bar--sticky:
    - entire title bar should turn white and stick to the top
  .page-title-bar--condensed-static:
    - title bar should be in a condensed and sticky state
  .page-title-bar--dynamic:
    - title bar should transition on scroll to a condensed bar
    - if the content area includes tabs, the tabs should push the
      the sticky header
  .page-title-bar--dynamic--before:
    - when it's in its full state
  .page-title-bar--dynamic--during:
    - the period between the start of the transition and the end of it
  .page-title-bar--dynamic--after:
    - the title bar is in the fully condensed position
*/

.page-title-bar {
  &-header {
    display: grid;
    grid-row-gap: 0;
    grid-column-gap: 0;
    grid-template:
      'breadcrumb           actions-condensed   actions-upper' minmax($spacing-03, auto)
      'title                actions             actions' $spacing-08
      'description          description         description' auto
      'content              content             content' max-content /
      minmax(200px, 60%) auto min-content;

    .page-title-bar--sticky & {
      @include condensed-style();
      width: 100%;
      padding-bottom: $spacing-05;
      z-index: 1000;
    }
  }

  &-header-right {
    //TODO: this should really be renamed due to rtl-layouts to -actions
    display: grid;
    grid-area: actions;
    justify-content: flex-end;
    align-content: center;
    padding-right: $spacing-07;
    [dir='rtl'] & {
      padding-right: unset;
      padding-left: $spacing-07;
    }

    .#{$prefix}--btn--primary {
      margin-left: $spacing-03;
      [dir='rtl'] & {
        margin-left: unset;
        margin-right: $spacing-03;
      }
    }

    .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
      margin-left: 0;
      [dir='rtl'] & {
        margin-left: unset;
        margin-right: 0;
      }
    }

    /* search boxes, selects, etc should have slightly wider margin */
    .#{$prefix}--btn ~ :not(.#{$prefix}--btn) {
      margin-left: $spacing-05;
      margin-right: $spacing-05;
    }

    .#{$prefix}--btn + .#{$prefix}--btn--secondary:not(.#{$iot-prefix}--icon-switch) {
      margin-left: $spacing-05;
    }

    transition: opacity $duration--moderate-02;

    .page-title-bar--condensed-static & {
      @include condensed-style();
    }

    .page-title-bar--dynamic & {
      @include make-sticky();
      margin-left: $spacing-05;
      [dir='rtl'] & {
        margin-left: unset;
        margin-right: $spacing-05;
      }
    }

    // Move the action buttons to the left in the condensed toolbar if there are header actions
    .page-title-bar--with-actions.page-title-bar--dynamic--after & {
      grid-area: actions-condensed;
      padding-right: 0;
      opacity: 1;
      transition: opacity $duration--moderate-02;
    }

    // Fade out the action buttons and scroll them underneath the backdrop
    .page-title-bar--with-actions.page-title-bar--dynamic--during &,
    .page-title-bar--with-actions.page-title-bar--dynamic--before & {
      opacity: calc(1 - var(--scroll-transition-progress));
      z-index: 0;
    }

    .page-title-bar.page-title-bar--dynamic--after & {
      z-index: 1000;
    }
    .page-title-bar.page-title-bar--dynamic--during & {
      z-index: 1000;
    }
  }

  &-breadcrumb-bg {
    grid-column-start: breadcrumb-start;
    grid-column-end: actions-upper-end;
    grid-row-start: 1;
    grid-row-end: 2;
    pointer-events: none;
    border-bottom: 1px solid transparent;

    .page-title-bar--dynamic--during &,
    .page-title-bar--dynamic--after & {
      @include condensed-style();
      z-index: 1;
      display: grid;
      content: '';
      background: rgba($ui-01, var(--scroll-transition-progress));
      border-bottom: 1px solid rgba($ui-03, var(--scroll-transition-progress));
    }
  }

  &-breadcrumb {
    grid-area: breadcrumb;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: $spacing-04 0 $spacing-02 $spacing-07;
    max-height: clamp(0rem, $spacing-02, $spacing-08);
    white-space: nowrap;

    [dir='rtl'] & {
      padding: $spacing-04 $spacing-07 $spacing-02 0;
    }

    .page-title-bar--dynamic & {
      @include make-sticky();
      overflow: hidden;
      transition: all $duration--fast-02;
      border-bottom: 1px solid transparent;
      margin-bottom: -1px;
    }

    .page-title-bar--dynamic--during &,
    .page-title-bar--dynamic--after & {
      padding-bottom: $spacing-04;
      transition: all $duration--fast-02;
      z-index: 900;
    }

    .page-title-bar--condensed-static & {
      @include condensed-style();
      grid-area: title;
      padding-bottom: $spacing-04;
      z-index: 1000;
    }

    > nav {
      width: 100%;
      .#{$prefix}--breadcrumb-item:first-child {
        [dir='rtl'] & {
          margin-right: 0;
        }
      }
    }

    .page-title-bar-breadcrumb-current {
      --breadcrumb-scroll-distance: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity $duration--fast-01 linear, transform $duration--fast-01 linear;
      margin-left: 0;

      [dir='rtl'] & {
        text-align: right;
        margin-right: $spacing-03;
      }

      .page-title-bar--dynamic & {
        opacity: 0;
        transform: translateY(var(--breadcrumb-scroll-distance));
      }

      .page-title-bar--dynamic--during &,
      .page-title-bar--dynamic--after & {
        transform: translateY(
          calc(
            var(--breadcrumb-scroll-distance) -
              (var(--scroll-transition-progress) * var(--breadcrumb-scroll-distance))
          )
        );
        opacity: var(--scroll-transition-progress);
      }
    }
  }

  &-actions-upper {
    @include type-style('label-01');
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: actions-condensed-start;
    grid-column-end: actions-upper-end;
    padding-right: $spacing-07;
    z-index: 100;
    [dir='rtl'] & {
      padding-right: unset;
      padding-left: $spacing-07;
    }

    .page-title-bar--dynamic & {
      @include make-sticky();
    }

    .page-title-bar--dynamic--after & {
      grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: actions-upper-start;
      grid-column-end: actions-upper-end;
    }
  }

  &-title {
    display: grid;
    grid-area: title;
    justify-content: space-between;
    padding-left: $spacing-07;
    padding-right: $spacing-07;

    .page-title-bar--dynamic--during &,
    .page-title-bar--dynamic--after & {
      opacity: calc(1 - var(--scroll-transition-progress));
    }
    .page-title-bar--condensed-static & {
      display: none;
    }
    &--text {
      align-items: center;
      display: flex;
      white-space: nowrap;
      overflow: hidden;

      h2 {
        @include type-style('productive-heading-04');
        // need to match the 40x40px icons that could render in
        height: $spacing-08;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
      }

      & #tooltip {
        fill: $icon-01;
      }

      .#{$prefix}--tooltip__label {
        height: 100%;
        width: $spacing-08;
      }

      .#{$prefix}--tooltip__trigger {
        margin-left: 0;
        padding-left: $spacing-04;
        padding-right: $spacing-04;
        height: calc(100% - 2px); // make room for outline
        width: calc(#{$spacing-08} - 1px);

        svg {
          width: $spacing-05;
          height: $spacing-05;
        }
      }
    }
    .#{$prefix}--text-input {
      margin-right: $spacing-05;
      [dir='rtl'] & {
        margin-right: unset;
        margin-left: $spacing-05;
      }
    }

    &--edit.#{$prefix}--btn.#{$prefix}--btn--field {
      margin-left: $spacing-05;
      [dir='rtl'] & {
        margin-left: unset;
        margin-right: $spacing-05;
      }
    }
  }

  .#{$prefix}--tab-content {
    padding: unset;
    padding-top: $spacing-05;
  }

  &-description {
    display: grid;
    grid-area: description;
    @include type-style('body-long-01');
    margin-top: $spacing-02;
    max-width: 40rem;
    padding-left: $spacing-07;
    padding-right: $spacing-07;

    .#{$prefix}--inline-loading {
      @include type-style('label-01');
      height: $spacing-04;
      min-height: unset;
      &__animation {
        width: $spacing-05;
        height: $spacing-05;
        margin-right: $spacing-03;
      }
    }
  }

  &-loading {
    height: carbon--rem(20px);
    margin: $spacing-05 0 0 $spacing-07;
  }

  &-content {
    display: grid;
    grid-area: content;
    padding: 0 $spacing-07;
    margin-top: $spacing-06;

    &.page-title-bar-content--active {
      .#{$prefix}--tabs--scrollable {
        transition: all $duration--fast-02 ease-in;
        background: $ui-01;
      }
    }

    .#{$prefix}--tabs--scrollable {
      .#{$prefix}--tabs--scrollable__nav-link {
        text-align: left;

        [dir='rtl'] & {
          text-align: right;
        }
      }

      .page-title-bar--dynamic & {
        z-index: 1100;
        @include make-sticky();
      }
    }
  }
}