@import colors

// Google Fonts
// TODO: Localize
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Shadows+Into+Light&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap')
@import url('/fonts/hua/font-hua.css')

$font: "Microsoft YaHei UI", Avenir, Helvetica, Arial, sans-serif

.font-code
  font-family: Inconsolata, Monaco, Monospaced, serif

.font-script-en
  font-family: 'Caveat', 'Shadows Into Light', cursive

.font-script-cn
  font-family: Hua, $font

.bold
  font-weight: bold

// Container width (This is normally 50vw,
//   but when it's smaller than 900px, use 100vw - 50px, because 50px is the margin)
$app-width: max(50vw, min(900px, 100vw - 50px))

// Remove UA body margin
body
  margin: 0

// Non-selectable text
@mixin unselectable
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.unselectable
  @include unselectable

// Clickable text
.clickable:hover
  cursor: pointer
  @include unselectable

// Vertical flex
.fbox-v
  display: flex
  flex-flow: column
  height: 100%

.mh0
  min-height: 0

// Horizontal flex
.fbox-h
  display: flex
  flex-flow: row

.mw0
  min-width: 0

// Flex properties
.f-no-grow
  flex-grow: 0

.f-grow1
  flex-grow: 1

.f-no-shrink
  flex-shrink: 0

.f-shrink1
  flex-shrink: 1

// Expand in the vertical direction
.f-v-expand
  flex: 1 0
  min-height: 0

// Expand in the horizontal direction
.f-h-expand
  flex: 1 0
  min-width: 0

.h100
  height: 100%

.w100
  width: 100%

// Vertical Flex Center
@mixin flex-vcenter
  display: flex
  flex-flow: column
  justify-content: center

// Center both horizontally and vertically
.fbox-center
  @include flex-vcenter
  align-items: center

// Center vertically only
.fbox-vcenter
  @include flex-vcenter

// No wrap text
.nowrap
  overflow: hidden
  white-space: nowrap
  text-overflow: clip

.nowrap.e
  text-overflow: ellipsis

#app
  font-family: $font
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: $color-text-main

  // Max width and center
  max-width: 900px
  margin: auto

  // Vertical flex box
  display: flex
  flex-flow: column
  height: 100%

body
  background: #f9f2e0
  height: 100%
  overscroll-behavior-y: none

html
  height: 100%
