@use "../mixins/bem" as *;
@use "../mixins/function" as *;
@use "../mixins/config" as *;

@include b(bodyBgImage) {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -999999;
  height: 100vh;
  width: 100vw;
  transition: background 0.5s;
  background: center center / cover no-repeat;

  .mask {
    width: 100%;
    height: 100%;
    background-color: getCssVar("body-mask-bg-color");
  }

  /* 兼容 ArticlePageStyle 组件 */
  & ~ .Layout {
    &.#{$namespace}-card,
    &.#{$namespace}-card-nav,
    &.#{$namespace}-segment,
    &.#{$namespace}-segment-nav {
      .VPContent:not(.is-home) {
        background-color: transparent;
      }

      @media (min-width: 1280px) {
        /* 导航栏 */
        .VPNav {
          /* 如果导航栏要透明效果，打开 background-color，如果导航栏要透明磨砂效果，打开这两个样式 */
          .VPNavBar:not(.home) {
            background-color: getCssVar("bg-color-2") !important;
            backdrop-filter: saturate(200%) blur(20px);
            .content-body {
              background-color: transparent;
            }
          }
        }
        .VPSidebar {
          background-color: getCssVar("bg-color-2");
          .curtain {
            background-color: transparent;
          }
        }
      }
    }
  }
}