@import './color.less';
@import './align.less';
@import './anim.less';

html {
  transition: background-color 500ms ease-in-out;
  overflow: hidden;
}

html:hover {
  overflow-y: auto;
}

body {
  margin: 0;
  font-family: var(--main-font), PingFangSC, Microsoft Yahei, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html,
body,
#app {
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--page-background);
}

#app {
  padding-right: calc(100vw - 100% + 1rem);
}

@scrollbar-width: 0.42rem;

body::-webkit-scrollbar {
  width: @scrollbar-width;
  height: @scrollbar-width;
}
body::-webkit-scrollbar-button {
  display: none;
}
body::-webkit-scrollbar-thumb {
  width: @scrollbar-width;
  border-radius: @scrollbar-width;
  background: var(--primary);
}
body::-webkit-scrollbar-track {
  background: var(--page-background);
}
body::-webkit-scrollbar-corner {
  background: var(--page-background);
}

@code-scrollbar-width: 0.175rem;

pre::-webkit-scrollbar {
  width: @code-scrollbar-width;
  height: @code-scrollbar-width;
}
pre::-webkit-scrollbar-button {
  display: none;
}
pre::-webkit-scrollbar-thumb {
  width: @code-scrollbar-width;
  border-radius: @code-scrollbar-width;
  background: var(--article-code-scroll);
}
pre::-webkit-scrollbar-track {
  background: var(--article-code-bg);
}
pre::-webkit-scrollbar-corner {
  background: var(--article-code-bg);
}

hr {
  outline: none;
}

@media screen and (max-width: 767px) {
  @scrollbar-width: 0.375rem;

  html {
    overflow-y: auto;
  }

  body::-webkit-scrollbar {
    width: @scrollbar-width;
    height: @scrollbar-width;
  }

  .mobile-hide {
    display: none !important;
  }
}