@import colors

// Constants
$font: Avenir, Helvetica, Arial, sans-serif

// 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))
$c-highlight: #ff7878

// Highlight color
.color-highlight
  color: $c-highlight

// Non-selectable text
@mixin unselectable
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-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

.hy-card
  width: 100%
  height: 100%
  background-color: #edf1f2
  border-radius: 15px
  margin: 20px 0

#page-desc
  margin-bottom: 20px

.button.anim
  transition: all .25s ease

.button.anim:hover
  transform: translateY(-5px)
  box-shadow: 0 10px 10px -5px $color-text-light
  cursor: pointer

*
  transition: all .25s ease

