@use "sass:color";

@mixin navigation() {
  // 侧边栏的导航样式
  .#{$lts-prefix}navigation {
    @include ul-reset();

    // 使用变量是为了方便计算submenu距离左侧的padding值
    --#{$lts-prefix}navigation-arrow-icon: #{escape-svg(
        $lts-navigation-arrow-icon
      )};
    --#{$lts-prefix}navigation-active-color: #{$lts-navigation-active-color};
    --#{$lts-prefix}navigation-padding-x: #{$lts-navigation-padding-x};
    --#{$lts-prefix}navigation-padding-y: #{$lts-navigation-padding-y};
    --#{$lts-prefix}navigation-prepend-margin-right: #{$lts-navigation-prepend-margin-right};
    --#{$lts-prefix}navigation-prepend-font-size: #{$lts-navigation-prepend-font-size};

    ul {
      @include ul-reset();
    }

    li {
      //  副标题
      &.subheader {
        padding: 8px 15px;
        overflow: hidden;
        font-size: 0.875rem;
        font-weight: 400;

        // color: color.scale($body-color, $lightness: 60%);
        color: adjust($body-color, 60%);

        @include text-ellipsis();
      }

      // 分隔符
      &.separator {
        height: 0;
        padding: 0;
        margin: 0.35em 0;
        overflow: hidden;

        // border-top: 1px solid color.scale($body-color, $lightness: 90%);
        border-top: 1px solid adjust($body-color, 90%);
      }

      // a链接的样式
      a {
        position: relative;
        display: grid;
        grid-template-areas: "prepend content append arrow";
        grid-template-columns: max-content 1fr auto auto;
        padding: var(--#{$lts-prefix}navigation-padding-y)
          var(--#{$lts-prefix}navigation-padding-x);
        margin-bottom: 4px;
        color: $body-color;
        text-decoration: none;
        letter-spacing: 0.5px;
        outline-width: 0;

        @include transition($lts-navigation-transition);

        // 如果使用徽章组件那么给徽章组件字体大小变小一点
        .badge {
          font-size: 60%;
        }

        + ul {
          @include navigation-submenu-spacing(5);
        }

        &:hover {
          // background-color: color.scale($body-color, $lightness: 96%);
          background-color: adjust($body-color, 96%);
        }

        // 前置内容
        .prepend {
          display: flex;
          grid-area: prepend;
          align-items: center;
          align-self: center;
          justify-content: center;
          margin-right: var(--#{$lts-prefix}navigation-prepend-margin-right);
          font-size: var(--#{$lts-prefix}navigation-prepend-font-size);
          line-height: 1;
        }

        // 标题
        .content {
          grid-area: content;
          align-self: center;

          @include text-ellipsis();
        }

        // 追加内容
        .append {
          display: flex;
          grid-area: append;
          align-items: center;
          align-self: center;
          margin: 0 10px;
        }

        // 激活的a链接
        &.active {
          color: $lts-navigation-active-color;

          // background-color:
          //   color.scale(
          //     $lts-navigation-active-color,
          //     $lightness: 88%
          //   );
          background-color: adjust($lts-navigation-active-color, 88%);

          &:hover {
            // background-color:
            //   color.scale(
            //     $lts-navigation-active-color,
            //     $lightness: 84%
            //   );
            background-color: adjust($lts-navigation-active-color, 84%);
          }
        }

        // 箭头
        &.has-arrow {
          &::after {
            display: flex;
            flex-shrink: 0;
            grid-area: arrow;
            align-items: center;
            align-self: center;
            width: 1.25em;
            height: 1.25em;
            content: " ";
            background-color: $body-color;
            mask-image: var(--#{$lts-prefix}navigation-arrow-icon);
            mask-repeat: no-repeat;
            mask-size: 1.25em;

            @include transition(transform 150ms $lts-transition-fn);

            transform: scale(0.4) rotate(0);
            transform-origin: center;
            will-change: transform;
          }
        }
      }

      // 不包含open类的li的ul都隐藏
      &:not(.open) > a + ul {
        display: none;
      }

      // 带有展开类的li
      &.open {
        > a {
          color: $lts-navigation-active-color;

          &:hover {
            // background-color:
            //   color.scale(
            //     $lts-navigation-active-color,
            //     $lightness: 96%
            //   );

            background-color: adjust($lts-navigation-active-color, 96%);
          }

          &::after {
            background-color: $lts-navigation-active-color;
            transform: scale(0.4) rotate(-90deg);
          }
        }
      }
    }
  }
}
