:root
  --global-font-size: $font-size
  --global-bg: $body-bg
  --font-color: $font-black
  --hr-border: lighten($theme-hr-color, 50%)
  --hr-before-color: lighten($theme-hr-color, 30%)
  --search-bg: $search-bg
  --search-input-color: $search-input-color
  --search-result-title: $search-result-title
  --preloader-bg: $preloader-bg
  --preloader-color: $preloader-word-color
  --tab-border-color: $tab-border-color
  --tab-botton-bg: $tab-botton-bg
  --tab-botton-color: $tab-botton-color
  --tab-button-hover-bg: $tab-button-hover-bg
  --tab-button-active-bg: $tab-button-active-bg
  --card-bg: $card-bg
  --sidebar-bg: $sidebar-background
  --btn-hover-color: $button-hover-color
  --btn-color: $button-color
  --btn-bg: $button-bg
  --text-bg-hover: $text-bg-hover
  --light-grey: $light-grey
  --white: $white
  --text-highlight-color: $text-highlight-color
  --blockquote-color: $blockquote-color
  --blockquote-bg: $blockquote-background-color
  --reward-pop: $reward-pop-up-bg
  --toc-link-color: $toc-link-color

html
  height: 100%
  font-size: 20px

body
  position: relative
  min-height: 100%
  background: var(--global-bg)
  color: var(--font-color)
  font-size: var(--global-font-size)
  font-family: $font-family
  line-height: $text-line-height
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  if !hexo-config('copy.enable')
    user-select: none

*::-webkit-scrollbar
  width: 8px
  height: 8px

*::-webkit-scrollbar-thumb
  background: var(--btn-bg)

*::-webkit-scrollbar-track
  background-color: transparent

input::placeholder
  color: var(--font-color)

if $web-bg
  #web_bg
    position: fixed
    z-index: -999
    width: 100%
    height: 100%
    background: $web-bg
    background-attachment: local
    background-position: center
    background-size: cover
    background-repeat: no-repeat

h1,
h2,
h3,
h4,
h5,
h6
  position: relative
  margin: 1rem 0 .7rem
  color: var(--text-highlight-color)
  font-weight: bold

  code
    font-size: inherit !important

*
  box-sizing: border-box

hr
  position: relative
  margin: 2rem auto
  border: 2px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)

    &:hover
      &:before
        left: calc(95% - 20px)

    &:before
      position: absolute
      top: $hr-icon-top
      left: 5%
      z-index: 1
      color: var(--hr-before-color)
      content: $hr-icon
      font-size: 20px
      line-height: 1
      transition: all 1s ease-in-out
      @extend .fontawesomeIcon

.table-wrap
  overflow-x: scroll
  margin: 0 0 1rem

table
  display: table
  width: 100%
  border-spacing: 0
  border-collapse: collapse
  empty-cells: show

  thead
    background: alpha($table-thead-bg, 10%)

  th,
  td
    padding: .3rem .6rem
    border: 1px solid var(--light-grey)
    vertical-align: middle

*::selection
  background: $theme-text-selection-color
  color: #F7F7F7

button
  padding: 0
  outline: 0
  border: none
  background: none
  cursor: pointer

a
  color: $a-link-color
  text-decoration: none
  word-wrap: break-word
  transition: all .2s
  overflow-wrap: break-word

  &:hover
    color: $light-blue

// font
if $site-name-font
  #site-title,
  #site-subtitle,
  #site-name,
  #aside-content .author-info__name,
  #aside-content .author-info__description
    font-family: $site-name-font

.is-center
  text-align: center

.copy-true
  user-select: all

.pull-left
  float: left

.pull-right
  float: right

.button--animated
  position: relative
  z-index: 1
  transition: color 1s

  &:before
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: -1
    background: var(--btn-hover-color)
    content: ''
    transition: transform .5s ease-out
    transform: scaleX(0)
    transform-origin: 0 50%

  &:hover
    &:before
      transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
      transform: scaleX(1)

img
  max-width: 100%
  transition: all .2s

  &[src=''],
  &:not([src])
    opacity: 0

.img-alt
  margin: -.5rem 0 .5rem
  color: #858585

  &:hover
    text-decoration: none !important