/**
 * @date: 2024/1/16
 * @author: 小红
 * @fileName: body
 * @Description: 样式
 */
@use "_util";

body {
  @include util.useThemeVar((
    text-color:(rgb(76, 73, 72), rgba(255, 255, 255, 0.7)),
    mask-color:(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6)),
  ));

  & {
    font-family: "Butterfly Font", "Microsoft YaHei", "微软雅黑", Arial, "sans-serif";
    font-size: 14px;
    line-height: 2;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overflow-y: overlay;
    scroll-behavior: smooth;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--body-background);
    color: var(--text-color);
  }
}

#Butterfly {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;


  > .mask {
    @keyframes m_show {
      0% {
        opacity: 0
      }

      100% {
        opacity: 1;
        filter: none
      }
    }

    @keyframes m_hide {
      0% {
        opacity: 1;
        filter: none
      }

      100% {
        opacity: 0;
        display: none;
      }
    }
    
    & {
      position: fixed;
      display: none;
      z-index: 100;
      width: 100%;
      height: 100%;
      background-color: var(--mask-color);
      backdrop-filter: blur(20px) saturate(1.5);
      transform: translateZ(0);
      -webkit-transform-style: preserve-3d;
    }

    &.active {
      animation: 0.6s ease 0s 1 normal none running m_show;
    }

    &.hide {
      animation: 0.6s ease 0s 1 normal none running m_hide;
    }

  }

  img[data-lazy-src]:not(.loaded,.error,.loading) {
    filter: blur(50px) brightness(1);
  }
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px
}

::-webkit-scrollbar-thumb {
  background: var(--theme);
  cursor: var(--cursor-pointer);
}

::-webkit-scrollbar-track {
  background-color: transparent
}

::selection {
  color: #fff;
  background-color: #00c4b6;
}

