@import './variables.scss';

.page-header-container {
  @apply ml-10 pl-6 pr-10 pt-4 w-56 fixed z-10 top-32 bottom-0 right-0 hidden lg:block;

  .tip {
    @apply font-extrabold;
  }

  ul {
    @apply list-none pl-0;

    .page-header-menu-depth_2 {
      @apply py-2 font-semibold text-sm;
      @apply border-t border-dashed border-reco-border-light dark:border-reco-border-dark;
      &.active {
        a {
          @apply text-reco-brand;
        }
      }
    }

    .page-header-menu-depth_3 {
      @apply py-1.5 pl-1 relative text-xs transition-all;
      &::before {
        @apply absolute inset-y-0 left-0 m-auto block w-0 h-0 rounded-1/2 transition-all;
        @apply bg-reco-brand;
        content: '';
      }
      &:hover {
        @apply text-reco-brand;
      }
      &.active {
        @apply pl-2;
        a {
          @apply text-reco-brand;
        }
        &::before {
          @apply w-1 h-1 animate-ping;
        }
      }
    }
  }
}