@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/layout';
@import '../../styles/utils/legacy/grid';
@import '../../styles/utils/legacy/layout';
@import '../../styles/utils/button-reset';
@import '../../styles/utils/layers';
@import './mixins';
@import './variables';

@layer kz-components {
  $title-block-spacing-default: 20px;
  $title-block-spacing-above-1080: 24px;
  $title-block-gap-default: 12px;
  $breadcrumb-circle-width: 48px;
  $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
    $breadcrumb-circle-width * 2.25;
  $title-block-separator-height: 0.0625rem;
  $tab-container-height-default: $ca-grid * 3;
  $tab-container-height-small: $ca-grid * 2.5;
  $tab-container-height-default-collapsed: 0;
  $tab-container-height-medium-and-small-collapsed: 0;

  /* stylelint-disable no-descending-specificity */
  .titleBlock {
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: $dt-color-background-color-default;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;

    &.lightVariant {
      background-color: $dt-color-background-color-light;
    }

    &.educationVariant {
      background-color: $dt-color-background-color-eduction;
    }

    &.adminVariant {
      background-color: $dt-color-background-color-admin;
    }

    @media print {
      display: none;
    }
  }

  .titleRow {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .rowBelowSeparator {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .lightVariant .titleRow {
    background-color: $color-white;
  }

  .adminVariant .titleRow {
    background-color: $color-white;
  }

  %titleBlockInner {
    box-sizing: border-box;
    max-width: $layout-content-max-width;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
    padding: 0 $title-block-spacing-default 0 0;

    @include title-block-min-media-1080 {
      padding: 0;
      margin-inline: $title-block-spacing-above-1080;
    }
  }

  .titleRowInner {
    @extend %titleBlockInner;
  }

  .lightVariant .titleRowInner {
    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 $color-gray-300;
  }

  %rowBelowSeparatorInnerMarginOverride {
    padding: 0 4px 0 12px;

    @include title-block-min-media-1080 {
      padding: 0;
      margin-inline: $title-block-spacing-above-1080;
    }
  }

  .rowBelowSeparatorInner {
    @extend %titleBlockInner;
    @extend %rowBelowSeparatorInnerMarginOverride;
  }

  .titleRowInnerContent {
    box-sizing: border-box;
    min-height: 88px;
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: $title-block-gap-default;
    padding-block: $title-block-spacing-default;
    justify-content: space-between;
    box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0 rgba($color-white-rgb, 0.1);

    .educationVariant & {
      box-shadow: inset 0 calc(-1 * $title-block-separator-height) 0 0
        rgba($color-purple-700-rgb, 0.2);
    }

    .lightVariant &,
    .adminVariant &,
    .collapseNavigationArea & {
      box-shadow: none;
    }

    @include title-block-medium-and-small {
      box-shadow: none;

      .educationVariant & {
        box-shadow: none;
      }
    }

    @include title-block-under-576 {
      flex-wrap: wrap;
      gap: 4px;
    }
  }

  .title {
    align-items: center;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing

    // truncation
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    // Applying width 100% when the title is *not* long and is followed by a subtitle
    // causes misalignment of both.
    @include title-block-under-1366 {
      width: 100%;
    }
  }

  .titleAndSubtitle {
    display: flex;
    align-items: center;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
    transform: translateY(-0.0833em);

    .hasSubtitle & {
      @include title-block-under-1366 {
        transform: translateY(-12px);
      }
    }
  }

  .titleAndSubtitleInner {
    display: flex;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing

    // TODO: removing .hasLongTitle here fixes the alignment on Performance story, but we should be able to not wrap subtitle.
    .hasSubtitle.hasLongTitle.hasLongSubtitle & {
      align-items: center;

      @include title-block-under-1366 {
        align-items: baseline;
      }
    }

    .hasPageSwitcherSelect & {
      @include title-block-medium-and-small {
        align-items: normal;
        flex-direction: column;
        justify-content: space-between;
        transform: translateY(calc(#{$ca-grid} / 3));
      }
    }

    .hasSubtitle & {
      align-items: baseline;
      overflow: hidden;

      @include title-block-under-1366 {
        align-items: normal;
        flex-direction: column;
        justify-content: space-between;
        transform: translateY(calc(#{$ca-grid} / 3));

        .hasLongTitle.hasLongSubtitle & {
          align-items: baseline;
        }
      }

      @include title-block-medium-and-small {
        transform: translateY(calc(#{$ca-grid} / 2));
      }
    }
  }

  .titleTextOverride.titleTextOverride {
    font-size: $typography-heading-3-font-size;
    line-height: $typography-heading-3-line-height;
    letter-spacing: $typography-heading-3-letter-spacing;
    margin: 8px 0;

    .hasSubtitle & {
      margin-bottom: 0;
    }

    @include title-block-media-mixed-width {
      font-size: $typography-heading-2-font-size;
      line-height: $typography-heading-2-line-height;
      letter-spacing: $typography-heading-2-letter-spacing;
      margin: 2px 0;

      .hasSubtitle & {
        margin-bottom: 0;
      }
    }

    @include title-block-min-container-1080 {
      font-size: $typography-heading-2-font-size;
      line-height: $typography-heading-2-line-height;
      letter-spacing: $typography-heading-2-letter-spacing;
      margin: 2px 0;

      .hasSubtitle & {
        margin-bottom: 0;
      }
    }

    .hasLongTitle & {
      @include title-block-media-mixed-width {
        font-size: $typography-heading-3-font-size;
        line-height: $typography-heading-3-line-height;
        letter-spacing: $typography-heading-3-letter-spacing;
        margin: 2px 0;

        .hasSubtitle & {
          margin-bottom: 0;
        }
      }

      @container (min-width: #{$layout-breakpoints-large}) and (max-width: 1365px) {
        font-size: $typography-heading-3-font-size;
        line-height: $typography-heading-3-line-height;
        letter-spacing: $typography-heading-3-letter-spacing;
        margin: 2px 0;

        .hasSubtitle & {
          margin-bottom: 0;
        }
      }
    }
  }

  .avatar {
    display: none;
    align-self: self-start;
    box-sizing: border-box;
    height: $ca-grid * 2;
    width: $ca-grid * 2;

    @include ca-margin($end: calc(#{$ca-grid} / 2));

    > * {
      max-width: 100%;
    }

    &.withBorder {
      overflow: hidden;
      border: 3px solid $color-white;
      border-radius: 50%;
    }

    .hasLongTitle & {
      display: none;
    }

    @include title-block-media-mixed-width {
      display: block;
    }

    @include title-block-min-container-1080 {
      display: block;
    }
  }

  .hamburger {
    display: flex;
    align-self: self-start;

    @include title-block-min-media-1080 {
      display: none;
    }
  }

  .subtitle {
    display: flex;
    align-items: center;
    color: $color-white;
    font-family: $typography-paragraph-small-font-family;
    font-weight: $typography-paragraph-small-font-weight;
    font-size: $typography-paragraph-small-font-size;
    line-height: $typography-paragraph-small-line-height;
    letter-spacing: $typography-paragraph-small-letter-spacing;
    max-width: 230px;
    margin-inline: var(--spacing-12) 0;

    .lightVariant & {
      color: $color-purple-800;
    }

    .adminVariant & {
      color: $color-purple-800;
    }

    @include title-block-under-1366 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: none;
      margin: calc(#{$ca-grid} / 5) 0;
    }
  }

  .subtitleText {
    @include title-block-under-1366 {
      max-width: 42vw;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    @include title-block-small {
      max-width: 88vw;
    }
  }

  .sectionTitleContainer {
    display: flex;
    align-items: center;
    padding-block: 9px;
    padding-inline-end: 8px; // 20 take 12 result in 8 extra padding needed in section versus tabs UI

    @include title-block-min-container-1080 {
      padding-block: 17px;
    }
  }

  .sectionTitle {
    display: block;
  }

  .sectionTitleInner {
    display: flex;
    flex-direction: column;
    row-gap: 4px;

    @include title-block-min-container-1080 {
      flex-direction: row;
      align-items: center;
      column-gap: $title-block-gap-default;
    }
  }

  .sectionTitleOverride.sectionTitleOverride {
    white-space: nowrap;
    font-family: $typography-heading-2-font-family;
    font-weight: $typography-heading-2-font-weight;
    font-size: $typography-heading-2-font-size;
    line-height: $typography-heading-2-line-height;
    letter-spacing: $typography-heading-2-letter-spacing;

    @include title-block-under-1645 {
      font-family: $typography-heading-3-font-family;
      font-weight: $typography-heading-3-font-weight;
      font-size: $typography-heading-3-font-size;
      line-height: $typography-heading-3-line-height;
      letter-spacing: $typography-heading-3-letter-spacing;
    }

    @include title-block-medium-and-small {
      font-family: $typography-heading-4-font-family;
      font-weight: $typography-heading-4-font-weight;
      font-size: $typography-heading-4-font-size;
      line-height: $typography-heading-4-line-height;
      letter-spacing: $typography-heading-4-letter-spacing;
    }
  }

  .sectionTitleDescription {
    color: $color-white;
    max-width: 780px;
    font-family: $typography-paragraph-small-font-family;
    font-weight: $typography-paragraph-small-font-weight;
    font-size: $typography-paragraph-small-font-size;
    line-height: $typography-paragraph-small-line-height;
    letter-spacing: $typography-paragraph-small-letter-spacing;

    &.dark {
      color: rgba($color-purple-800-rgb, 0.7);
    }
  }

  .rowBelowSeparatorInnerContent {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .titleAndAdjacent {
    display: flex;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
  }

  .titleAndAdjacentNotBreadcrumb {
    display: flex;
    transition: opacity 0.3s ease;
    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
    align-items: center;

    .breadcrumb:hover ~ &,
    .breadcrumb:focus ~ &,
    .breadcrumbTextLink:hover ~ &,
    .breadcrumbTextLink:focus ~ & {
      opacity: 0%;
    }
  }

  .tag {
    display: none;
    align-items: center;
    margin-inline: var(--spacing-12) 0;

    @include title-block-media-mixed-width {
      display: flex;
    }

    @include title-block-min-container-1080 {
      display: flex;
    }

    + .pageSwitcherSelectNextToTitle {
      margin-inline-start: 0;
    }
  }

  .pageSwitcherSelectNextToTitle {
    flex-shrink: 0;
    width: var(--spacing-240);
    margin-inline: var(--spacing-12) 0;
  }

  .pageSwitcherSelectUnderneathTitle {
    flex-shrink: 0;
    max-width: var(--spacing-240);
  }

  .navigationTabsContainer {
    height: $tab-container-height-default;

    @include title-block-small {
      height: $tab-container-height-small;
    }
  }

  .navigationTabsContainerCollapsed {
    height: $tab-container-height-default-collapsed;

    @include title-block-medium-and-small {
      height: $tab-container-height-medium-and-small-collapsed;
    }
  }

  .navigationTabScrollerContainer {
    .hasNavigationTabs & {
      @include title-block-small {
        height: $tab-container-height-small;
        display: block;
        overflow-x: scroll;
        scrollbar-width: none;
        width: 100vw;

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }

  .navigationTabsNav {
    height: 100%;
  }

  .navigationTabsList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
  }

  %navigationTabEdgeShadow {
    display: none;
    pointer-events: none;

    @include title-block-small {
      display: block;
      position: absolute;
      top: $tab-container-height-small;
      width: $tab-container-height-small;
      height: $tab-container-height-small;
      background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
      z-index: 1;
    }

    .lightVariant & {
      @include title-block-small {
        background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
      }
    }

    .adminVariant & {
      @include title-block-small {
        background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
      }
    }

    .educationVariant & {
      @include title-block-small {
        background: linear-gradient(0deg, $color-blue-200, rgba($color-blue-200-rgb, 0));
      }
    }
  }

  .navigationTabEdgeShadowLeft {
    @extend %navigationTabEdgeShadow;

    transform: rotate(90deg);
    left: 0;
    top: calc(100% - #{$tab-container-height-default});

    @include title-block-small {
      top: calc(100% - #{$tab-container-height-small});
    }
  }

  .navigationTabEdgeShadowRight {
    @extend %navigationTabEdgeShadow;

    transform: rotate(-90deg);
    right: 0;
    top: calc(100% - #{$tab-container-height-default});

    @include title-block-small {
      top: calc(100% - #{$tab-container-height-small});
    }
  }

  // This should be in SecondaryAction.module.scss,
  // but the variants prevent us from breaking this out.
  .secondaryActionsContainer {
    display: flex;

    // To be removed eventually – the Dropdown does not
    // currently set its own color, and we want it
    // to be Cluny like the default secondary buttons
    .lightVariant &,
    .educationVariant &,
    .adminVariant & {
      color: $color-blue-500;
    }

    .secondaryOverflowCombinedMenu {
      display: none;
    }

    @include title-block-medium-and-small {
      .secondaryButtonContainer,
      .secondaryOverflowMenu {
        display: none;
      }

      .secondaryOverflowCombinedMenu {
        display: flex;
      }
    }
  }

  .breadcrumb {
    @include button-reset;

    cursor: pointer;
    position: absolute;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    text-decoration: none;

    @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));

    align-self: self-start;

    &:hover .breadcrumbTextLink {
      text-decoration: underline;
    }

    &:focus {
      outline: none;

      &::after {
        $focus-ring-offset: calc(
          (-2 * #{$border-focus-ring-border-width}) - #{$border-focus-ring-border-width}
        );

        content: '';
        position: absolute;
        background: transparent;
        border-color: $color-blue-200;
        border-radius: 50%;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        inset: $focus-ring-offset;
      }
    }

    display: none;

    @include title-block-media-mixed-width {
      display: flex;
      position: relative;
      transform: translateY(0);
      margin-inline: 0 var(--spacing-12);

      @include ca-position($start: 0);
    }

    @include title-block-min-container-1080 {
      display: flex;
      position: relative;
      transform: translateY(0);
      margin-inline: 0 var(--spacing-12);

      @include ca-position($start: 0);
    }
  }

  @mixin visually-hidden {
    clip-path: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  @mixin visually-hidden-reset {
    clip-path: initial;
    height: initial;
    overflow: initial;
    position: initial;
    white-space: initial;
    width: initial;
  }

  .breadcrumbTextLink {
    // We are using visually hidden here instead of display:none so that a screen reader
    // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
    @include visually-hidden;
    @include ca-position($start: -2 * $ca-grid);

    position: absolute;

    @include title-block-under-1645 {
      @include ca-position($start: $ca-grid);
    }

    @media only screen {
      @container (min-width: #{$breadcrumb-breakpoint-width}) {
        @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
      }
    }

    &:hover,
    &:focus,
    .breadcrumb:hover &,
    .breadcrumb:focus & {
      @include visually-hidden-reset;
      // ^be careful of this mixin unsetting values you need
      // e.g. I needed to set position:absolute again below
      position: absolute;
      display: block;
      animation: slide-fade 0.4s;

      [dir='rtl'] & {
        animation: reverse-slide-fade 0.4s;
      }
    }
  }

  .breadcrumbText {
    margin-inline-start: $spacing-xl;
    white-space: nowrap;
    font-family: $typography-heading-5-font-family;
    font-weight: $typography-heading-5-font-weight;
    font-size: $typography-heading-5-font-size;
    line-height: $typography-heading-5-line-height;
    letter-spacing: $typography-heading-5-letter-spacing;
  }

  .breadcrumb,
  .breadcrumb:hover,
  .breadcrumbText {
    color: $color-white;

    .lightVariant &,
    .educationVariant &,
    .adminVariant & {
      color: $color-purple-800;
    }
  }

  .circle {
    $border-width: 3px;

    flex: 0 0 $breadcrumb-circle-width;
    box-sizing: border-box;
    width: $breadcrumb-circle-width;
    height: $breadcrumb-circle-width;
    color: $color-white;
    border-color: rgba($color-white-rgb, 0.5);
    border-width: 2px;
    border-radius: 50%;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color 0.3s ease,
      transform 0.3s ease;

    .breadcrumb:hover &,
    .breadcrumb:focus & {
      transform: scale(1.1);
      border-color: $color-white;
      color: $color-white;
      background-color: rgba($color-white-rgb, 0.1);
    }

    .lightVariant &,
    .educationVariant &,
    .adminVariant & {
      color: $color-blue-500;
      border-color: $color-blue-300;
      border-width: $border-width;
    }

    .lightVariant .breadcrumb:hover &,
    .lightVariant .breadcrumb:focus &,
    .educationVariant .breadcrumb:hover &,
    .educationVariant .breadcrumb:focus &,
    .adminVariant .breadcrumb:hover &,
    .adminVariant .breadcrumb:focus & {
      border-color: $color-blue-500;
      color: $color-blue-500;
      background-color: rgba($color-blue-500-rgb, 0.1);
    }
  }
  /* stylelint-enable no-descending-specificity */
}

@keyframes slide-fade {
  0% {
    display: none;
    opacity: 0%;
  }

  1% {
    display: block;
    opacity: 0%;
    transform: translateX(-30px);
  }

  100% {
    opacity: 100%;
    transform: translateX(0);
  }
}

@keyframes reverse-slide-fade {
  0% {
    display: none;
    opacity: 0%;
  }

  1% {
    display: block;
    opacity: 0%;
    transform: translateX(30px);
  }

  100% {
    opacity: 100%;
    transform: translateX(0);
  }
}