@import "../minireset.sass"

$grey: hsl(0, 0%, 40%)
$grey-dark: hsl(0, 0%, 20%)
$grey-darker: hsl(0, 0%, 10%)

$blue: hsl(207, 98%, 52%)
$green: hsl(147, 98%, 42%)
$red: hsl(357, 98%, 62%)

$primary: #fc0c18

$background: #eee
$border: #ddd

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default

html
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased
  background: #fff
  color: $grey
  font-family: $family-sans-serif
  font-size: 18px
  min-width: 300px
  overflow-x: hidden
  text-rendering: optimizeLegibility

body
  font-size: 1rem
  font-weight: 400
  line-height: 1.4
  padding-bottom: calc((6.2rem * 3) - 2px)

.header, .snippets, .nav, .main
  margin-left: auto
  margin-right: auto
  max-width: 29rem

.snippets
  max-width: 58rem

.snippet
  position: relative
  button
    cursor: pointer
    position: absolute
    right: 0.5em
    top: 0.5em

a
  color: $primary
  text-decoration: none

strong
  color: $grey-dark
  font-weight: 700

.content
  background: white
  padding: 3rem 1rem
  position: relative
  z-index: 1

.header
  text-align: center
  figure
    display: block
    height: 160px
    margin: 0 auto 1rem
    width: 160px
    img
      display: block
      height: 160px
      width: 160px
  h1
    color: $grey-dark
    font-size: 1.5rem
    font-weight: 700
    margin: 0
  p
    margin: 0

.ghbtns
  height: 30px
  margin-bottom: 3rem
  margin-top: 1rem
  overflow: hidden
  text-align: center
  iframe
    display: inline-block
    vertical-align: top

.nav
  margin-bottom: 3rem
  margin-top: 1rem
  text-align: center

.button, .or
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.html, .css, .button, .npm
  border-radius: 3px
  line-height: 1.2
  padding: 1.5rem
  transition: background 86ms ease-out

.html, .css
  background-color: $grey-dark
  font-family: $family-monospace
  font-size: 0.8rem
  text-align: left

.button, .npm
  align-items: center
  display: flex
  flex-direction: column
  justify-content: center
  text-align: center

.button
  background: $primary
  color: #fff
  cursor: pointer
  font-size: 0.9rem
  text-decoration: none
  strong
    color: #fff
    font-size: 1.1em
  span
    display: block
  small
    display: block
    opacity: 0.7
  em
    color: rgba(white, 0.5)
    display: block
    font-size: 0.8em
    font-style: normal
    margin-top: 0.5em
  &:hover
    background: darken($primary, 20%)

.or
  margin: 1rem
  text-align: center

.npm
  background: $background
  color: $grey-dark
  font-family: $family-monospace
  font-size: 0.8rem

.main
  p
    margin-bottom: 1em
  a:hover
    text-decoration: underline
  ul
    list-style: disc outside
  li
    + li
      margin-top: 1em
    strong
      display: block
      font-size: 1.1em
      em
        color: $red
        font-style: normal
        &.preserves
          color: $green
        &.sets
          color: $blue

.footer
  background: $grey-darker
  bottom: 0
  box-shadow: inset 0 2rem 3rem black
  color: hsl(0, 0%, 70%)
  left: 0
  padding-top: 2rem
  position: fixed
  right: 0
  a
    color: hsl(0, 0%, 30%)
    display: block
    line-height: 1
    padding: 2rem
    transition: background 29ms ease-out
    span
      display: block
      font-size: 0.8rem
      margin-bottom: 0.4rem
    strong
      color: hsl(0, 0%, 50%)
      display: block
      font-weight: normal
      transition: background 29ms ease-out
    &:hover
      background: $red
      color: rgba(black, 0.3)
      strong
        color: rgba(black, 0.5)
    &:nth-child(2):hover
      background: $blue
    &:nth-child(3):hover
      background: $green

.fork-me
  display: block
  height: 140px
  position: fixed
  right: 0
  top: 0
  width: 140px
  img
    display: block
    height: 140px
    width: 140px

@media (max-width: 699px)
  .main
    padding: 0 1rem 0 2rem
  .fork-me
    position: absolute

@media (min-width: 700px)
  body
    padding-bottom: calc(6.2rem - 2px)
  .content
    padding: 5rem
  .footer
    display: flex
    a
      flex-grow: 1

.native-js
  border-radius: 3px
  display: none
  font-size: 1rem
  opacity: 0
  margin-bottom: 3rem
  margin-left: auto
  margin-right: auto
  max-width: 50rem
  visibility: hidden

.native-show
  display: block
  opacity: 1
  visibility: visible

.native-flex
  align-items: center
  display: flex
  justify-content: center
  padding: 2em
  text-decoration: none

.native-img
  border-radius: 3px
  flex-grow: 0
  flex-shrink: 0
  height: 50px
  width: 125px

.native-details
  flex-grow: 1
  flex-shrink: 1

.native-main
  align-items: center
  flex-grow: 0
  flex-shrink: 1
  max-width: 640px

.native-company
  display: block
  font-size: 0.625em
  letter-spacing: 2px
  margin-bottom: 4px
  text-transform: uppercase

.native-desc
  display: block

.native-cta
  border: none
  border-radius: 3px
  box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15)
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  font-size: 0.75em
  font-weight: 400
  padding: 0.75em 1em
  text-transform: uppercase
  transform: translateY(-1px)
  transition: transform .3s ease-in-out
  vertical-align: top
  white-space: nowrap
  &:hover
    box-shadow: none
    transform: translateY(1px)

$native-bp: 600px

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

+until($native-bp)
  .native-flex
    display: block
    text-align: center
  .native-main
    margin-bottom: 2em
  .native-details
    margin: 1em

+from($native-bp)
  .native-flex
    display: flex
    text-align: left
  .native-main
    display: flex
    margin-right: 2em
  .native-details
    margin-left: 2em

+from($native-bp * 2)
  .native-js
    font-size: 1.25rem

// Background
$dt-gray-dark: #282a36
// Current Line & Selection
$dt-gray: #44475a
// Foreground
$dt-gray-light: #f8f8f2
// Comment
$dt-blue: #6272a4

$dt-cyan: #8be9fd
$dt-green: #50fa7b
$dt-orange: #ffb86c
$dt-pink: #ff79c6
$dt-purple: #bd93f9
$dt-red: #ff5555
$dt-yellow: #f1fa8c

.hljs
  background-color: $dt-gray-dark
  color: $dt-gray-light
  white-space: pre-wrap
  word-break: break-word

.hljs-comment
  color: $dt-blue

.hljs-tag
  color: $dt-cyan

.hljs-name
  color: $dt-orange

.hljs-attr
  color: $dt-purple

.hljs-string
  color: $dt-red

.hljs-keyword
  color: $dt-cyan

@media (prefers-color-scheme: dark)
  html, .content
    background-color: $grey-darker
    color: #888
  .header h1, strong
    color: #fff
  .npm
    background: $grey-dark
    color: #888
  .footer
    background: darken($grey-darker, 5%)