$chevron: ':global([data-hook="sidebar-sub-menu-chevron"])';
$popover-content: '.popover-content__content';
$popover-content-dark: '.popover-content__content.popover-content__content--skin-dark';
$popover-arrow: '.popover-content__arrow';
$popover-arrow-dark: '.popover-content__arrow.popover-content__arrow--skin-dark';

@keyframes sidebar-sub-menu-next-rotate-chevron-up {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

@keyframes sidebar-sub-menu-next-rotate-chevron-back {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes sidebar-sub-menu-next-open-items {
  0% {
    max-height: 0;
    opacity: 0.1;
  }

  20% {
    opacity: 1;
  }

  100% {
    max-height: 9999px;
  }
}

@keyframes sidebar-sub-menu-next-close-items {
  0% {
    max-height: 9999px;
  }

  100% {
    max-height: 0px;
  }
}

.sidebar-sub-menu-next {
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;

  &#{&}--skin-dark &__sub-menu#{&}__sub-menu--selected,
  &--skin-dark &__sub-menu-items {
    background: var(--wds-sidebar-item-level-2-fill-dark-default, #1F222B);
  }

  &#{&}--skin-dark &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(--wds-sidebar-item-level-1-fill-dark-active, #42454C);
  }

  &#{&}--skin-light &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(
      --wds-sidebar-item-level-1-fill-light-active,
      var(--wds-color-blue-300, #A8CAFF)
    );
  }

  &#{&}--skin-neutral &__sub-menu#{&}__sub-menu--selected,
  &--skin-neutral &__sub-menu-items {
    background: var(
      --wds-sidebar-item-level-2-fill-neutral-default,
      var(--wds-color-black-700, #ECEFF3)
    );
  }

  &#{&}--skin-neutral &__sub-menu#{&}__sub-menu--selected#{&}__sub-menu--minimized {
    background: var(
      --wds-sidebar-item-level-1-fill-neutral-hover,
      var(--wds-color-blue-400, #D6E6FE)
    );
  }

  &#{&}--skin-neutral &__sub-menu #{$chevron} svg {
    color: var(
      --wds-sidebar-item-text-light-default,
      var(--wds-color-text-standard-secondary, var(--wsr-color-D10, #000624))
    );
  }

  &__sub-menu &__chevron-right {
    display: flex;
  }

  &__sub-menu#{&}__sub-menu--animation-opening &__chevron-right svg {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: sidebar-sub-menu-next-rotate-chevron-up;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }

  &__sub-menu#{&}__sub-menu--animation-closing &__chevron-right svg {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: sidebar-sub-menu-next-rotate-chevron-back;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }

  &__sub-menu-items {
    max-height: 0;
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  &__sub-menu-items--minimized {
    height: 0;
  }

  &__sub-menu-items--expanded#{&}__sub-menu-items--level-2 {
    padding-bottom: var(
      --wds-sidebar-submenu-level-2-padding-bottom,
      var(--wds-space-100, 6px)
    );
  }

  &__sub-menu-items--animation-opening {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: sidebar-sub-menu-next-open-items;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }

  &__sub-menu-items--animation-closing {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: sidebar-sub-menu-next-close-items;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  }

  &__navigation-popover-root {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    width: 100%;
  }

  &__navigation-popover-root #{$popover-content} {
    display: flex;
    padding: 12px var(--wds-sidebar-item-context-menu-padding-inline, 0);
  }

  &#{&}--skin-neutral &__navigation-popover-root #{$popover-arrow} {
    border-color: var(
      --wds-sidebar-navigation-arrow-fill-neutral,
      var(--wds-color-black-100, var(--wsr-color-D10, #000624))
    );
  }

  &__navigation-popover-root #{$popover-content-dark} {
    background: var(--wds-sidebar-item-level-2-fill-dark-default, #1F222B);
  }

  &__navigation-popover-root #{$popover-arrow-dark} {
    border-color: var(--wds-sidebar-item-level-2-fill-dark-default, #1F222B);
  }

  &__navigation-popover-root #{$popover-content} &__navigation-popover {
    padding: 0;
    margin: 0;
    max-height: 252px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fit, 28px);
    position: relative;
  }

  &__navigation-popover-root #{$popover-content} &__navigation-popover::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 24px;
  }

  @media (prefers-reduced-motion) {
    &__sub-menu#{&}__sub-menu--animation-opening &__chevron-right svg,
    &__sub-menu#{&}__sub-menu--animation-closing &__chevron-right svg,
    &__sub-menu-items--animation-opening,
    &__sub-menu-items--animation-closing {
      animation-duration: 1ms;
    }
  }
}