// // 可替代 transition 使用
// transition($op = all, $time = 0.28s, $ease = ease-out)
//   transition: $op $time $ease
//   -moz-transition: $op $time $ease
//   -webkit-transition: $op $time $ease
//   -o-transition: $op $time $ease

// 为1个属性设置动画
trans1($op, $time = 0.2s)
  transition: $op $time ease-out
  -moz-transition: $op $time ease-out
  -webkit-transition: $op $time ease-out
  -o-transition: $op $time ease-out

// 为2个属性设置动画
trans2($op1, $op2)
  transition: $op1 0.2s ease-out, $op2 0.2s ease-out
  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out

trans2pro($op1, $t1, $op2, $t2)
  transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -moz-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
  -o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out

trans3($op1, $op2, $op3)
  transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out

trans4($op1, $op2, $op3, $op4)
  transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out

txt-ellipsis()
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

placeholder(rules)
  &::-webkit-input-placeholder
    rules()
  &:-moz-placeholder
    rules()
	&::-moz-placeholder
    rules()
	&:-ms-input-placeholder
    rules()

disable-select()
  -moz-user-select: none
  -ms-user-select: none
  -webkit-user-select: none
  user-select: none


scrollbar($w = 4px, $b = 2px, $c = var(--text-meta), $h = var(--text-p3))
  &::-webkit-scrollbar
    height: $w
    width: $w
  &::-webkit-scrollbar-track-piece
    background: transparent
  &::-webkit-scrollbar-thumb
    background: $c
    cursor: pointer
    border-radius: $b
    &:hover
      background: $h


scrollbar-codeblock($height = 4px)
  &::-webkit-scrollbar
    height: $height
    width: $height
  &::-webkit-scrollbar-track-piece
    background: transparent
  &::-webkit-scrollbar-thumb
    background: transparent
    cursor: pointer
    border-radius: $border-bar
  &:hover
    &::-webkit-scrollbar-thumb
      background: var(--text-meta)
      &:hover
        background: var(--text-p3)


hover-block($v, $h, $br = 4px)
  border-radius: $br
  padding: $v $h
  trans2 color background
  &:hover
    background: var(--block-hover)

floatable-trans()
  trans2 transform box-shadow
floatable-float()
  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
  transform: translate3d(0, -2px, 0)

hoverable-card()
  trans1 all
  onlight()
    box-shadow: $boxshadow-card
    &:hover
      floatable-float()
  ondark()
    &:hover
      box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
  :root[data-theme="light"] &
    onlight()
  :root[data-theme="dark"] &
    ondark()
  :root:not([data-theme]) &
    onlight()
    @media (prefers-color-scheme: dark)
      ondark()