//
// Copyright IBM Corp. 2023, 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.
//

/* stylelint-disable max-nesting-depth */

// Standard imports.
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/colors' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/layout/scss/convert';
@use '@carbon/styles/scss/components/button/tokens' as *;
@use '@carbon/styles/scss/config' as carbon-config;

@use '../../global/styles/project-settings' as c4p-settings;
@use '../../global/styles/mixins';
// Other Carbon settings if needed
// TODO: @use '@carbon/styles/scss/grid';
// or
// TODO: @use '@carbon/styles/scss/grid';

// CoachmarkStack uses the following Carbon for IBM Products components:
// TODO: @use(s) of IBM Products component styles used by CoachmarkStack

// The block part of our conventional BEM class names (blockClass__E--M).

$elements-block-class: #{c4p-settings.$pkg-prefix}--coachmark-stack-element;
$overlay-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
$stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
$style-stack-home: #{c4p-settings.$pkg-prefix}--coachmark-stack;

.#{$elements-block-class} {
  $block: &;

  position: fixed;
  z-index: 5901;
  inset-block-end: -100%;
  inset-inline-end: $spacing-05;
  //opacity: 0;
  transform: translateY(100%);
  visibility: hidden;

  &--is-mounted {
    inset-block-end: 0;
    /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
    transition: $duration-fast-02 motion(exit, productive);
    @media (prefers-reduced-motion) {
      transition: none;
    }
  }

  &--is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  // Stack the level-one item behind the level-two item.
  &--is-stacked {
    overflow: hidden;
    inset-block-end: 0;
    pointer-events: none;
    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
    transform: perspective(convert.to-rem(144px))
      translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
    transform-origin: top center;
    visibility: visible;

    &__light {
      /* stylelint-disable-next-line carbon/theme-use */
      background-color: $gray-90;
    }

    &__dark {
      /* stylelint-disable-next-line carbon/theme-use */
      background-color: $button-tertiary-active;
    }
  }
}

// ALL SUBSEQUENT ITEMS ARE THE "CHILD" STACK ITEMS
.#{$elements-block-class} ~ .#{$elements-block-class} {
  z-index: 5902;
}

// SPECIFIC TO THE HOME ELEMENT
.#{$stack-home-class} {
  &__nav-links {
    margin-block-start: $spacing-04;
    margin-inline-start: calc(-1 * $spacing-05);
  }

  &__icon-idea {
    margin-block-end: $spacing-03;
  }

  li {
    display: block;
    max-inline-size: 100%;
    white-space: nowrap;
  }

  button,
  &__navLinkLabels-tooltip {
    max-inline-size: 100%;

    .#{carbon-config.$prefix}--tooltip-content {
      color: $text-primary;
      margin-inline-start: calc($spacing-02 + $spacing-01);
      max-inline-size: 100%;
    }
  }

  &__navLinkLabels-text {
    display: inline-block;
    overflow: hidden;
    max-inline-size: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.#{$style-stack-home}--scaled-home {
  opacity: 0.8;
  transform: scale(0.9);
}

.#{$style-stack-home}--unscaled-home {
  opacity: 1;
  transform: none;
}