@use "colors"
@use "font"

// 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('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap')

html
  --font-fallback: "Noto Sans SC", Avenir, Helvetica, Arial, sans-serif
  @extend .font-custom

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

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

.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, .ui-accordion-header: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
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: colors.$color-text-main

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

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

// Make images not draggable
img
  user-drag: none
  -webkit-user-drag: none

  user-select: none
  -moz-user-select: none
  -webkit-user-select: none
  -ms-user-select: none

// Make 100% refer to 100vh and vw
body
  background: #f9f2e0
  height: 100%
  overscroll-behavior-y: none

html
  height: 100%

.vc-hue-slider__bar
  background: linear-gradient(to right, red 0%, yellow 16.66%, lime 33.33%, aqua 50%,blue 66.66%,fuchsia 83.33%,red 100%)


.card
  width: 100%
  background: #fdf9f1
  border-radius: 20px
  margin-bottom: 20px
  padding: 15px 20px
  overflow: auto
  overflow-x: hidden
  box-sizing: border-box
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%)

// Markdown style
.markdown-content
  text-align: justify
  text-justify: inter-word

  a
    color: colors.$color-text-special
    text-decoration: none

  h1, h2
    border-bottom: 1px solid colors.$color-text-special
    font-size: 1.5em
    margin-top: 1em

    line-height: 1.3
    margin-bottom: 0.25em
    padding: 0

  h2
    font-size: 1.3em

  h3
    font-size: 1.2em

  p
    font-size: 1em
    margin: 0.7em 0
    line-height: 1.6

  p:last-child
    margin-bottom: 0

  li
    font-size: 1em
    margin-bottom: 0.25em

  figure
    margin: 0

  img
    width: calc(100% + 20px)
    margin-left: -10px
    margin-right: -10px
    border-radius: 10px
    object-fit: cover
    max-height: 500px

  caption
    display: flex
    width: 100%
    justify-content: center
    align-items: center

    font-size: 0.8em
    color: colors.$color-text-light
