// $container-max-widths = {
//   sm: 100%,
//   md: 100%,
//   lg: 100%,
//   xl: 100%
// }
setka()
.container
    max-width: 100%
    padding: 0 15px


:root
  
  --header-font: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif
  // --mono-font: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace
  --mono-font: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace
  --color-text: #000000
  --color-link: #5d00ff
  --color-logo: #5324FB

  --color-code: #fd3700
  --color-code: #ff00dc
  --color-code-text: #333

  --color-border: #eaeaea
  
  --font-size: 16px
  --line-height: 22px
  --grid-unit: 11px
  +media-up('md')
    --font-size: 20px
    --line-height: 28px
    --grid-unit: 14px
    

#__nuxt
  min-height: 100vh;

body
  padding: 0;
  margin: 0;
  font-family: var(--header-font)
  color: #333
  // -webkit-font-smoothing: antialiased;

// CSS
h1 {
  font-size: 2.75rem
  line-height: calc(var(--grid-unit) * 4)
  margin-top: calc(var(--grid-unit) * 3)
  margin-bottom: calc(var(--grid-unit) * 4)
}

// Stylus
h1,h2,h3,h4,h5,h6
  font-family: var(--header-font)
  font-weight: 600
  margin-left: -0.03em

h2
  font-size: 2.1rem
  line-height: gu(3)
  margin-top: gu(5)
  margin-bottom: gu(3)

h3
  font-size: 1.6rem
  line-height: gu(3)
  margin-top: gu(2)
  margin-bottom: gu(2)

h4
  font-size: 1.2rem
  line-height: gu(2)
  margin-top: gu(2)
  margin-bottom: gu(2)

h5
  font-size: 1rem
  line-height: gu(2)
  margin-top: gu(2)
  margin-bottom: gu(2)

p, ul, ol, pre, table, blockquote
  margin-top: gu(2)
  margin-bottom: gu(2)

ul ul, ol ol, ul ol, ol ul
  margin-top: 0
  margin-bottom: 0

ul
  padding-left: 0.9em

pre
  display: block
  max-width: 100%
  overflow: auto
  background: rgba(0,0,0,0.02)
  box-shadow: inset 0 0 0 1px #efefef
  padding: gu(2) gu(1) gu(2) gu(1)
  em
    font-style: normal
    // font-weight: bold
    color: var(--color-code)
  code
    color: var(--color-code-text)

.hljs
  padding: 0 !important
  background: transparent !important

.hljs-string, .hljs-doctag
  color: var(--color-code) !important

code
  color: var(--color-code)
  font-family: var(--mono-font)
  font-size: 87.5%
  vertical-align: bottom

a
  color: var(--color-link)
  text-decoration: none

small 
  vertical-align: top

.subheader
  font-family: var(--header-font)
  font-size: 1.4rem
  font-weight: 300
  line-height: gu(3)
  color: #222

.link-button
  line-height: gu(3)
  display inline-block
  padding: 0 gu(2)
  box-shadow: inset 0 0 0 2px var(--color-link)
  transition: all 0.3s ease
  &:hover
    color: white
    background: var(--color-link)

// Tables
table
  border-collapse: collapse
th
  text-align: left
  color: #555
  padding: gu(1) 20px gu(1) 0
td
  padding: gu(1) 20px gu(1) 0
  &:last-chind
    padding-right: 0

.table-content
  +media-down('md')
    display: block
    overflow-x: auto

.table-bordered
  border-spacing: 0
  border-radius: 4px
  box-shadow: inset 0 0 0 1px #e0e0e0
  th
    padding: gu(1) 0.5em gu(1) 0.5em
    border-right: 1px solid #e2e2e2
    box-shadow: inset 0 -1px 0 0 #e0e0e0
    &:last-child
      border none
  td
    // vertical-align: top
    padding: gu(1) 0.5em gu(1) 0.5em
    border-right: 1px solid #e2e2e2
    box-shadow: inset 0 -1px 0 0 #e0e0e0
    &:first-child
      padding-left: 10px
    &:last-child
      border none
      padding-right: 10px
  tbody
    tr:last-child
      td, th
        box-shadow: none


// Colors
.color-text
  color: var(--color-text)

.color-inherit
  color: var(--color-text)



// Example
.example
  padding-top: gu(1);
  padding-bottom: gu(1);
  background-color: rgba(170, 114, 255, 0.15)
  box-shadow: inset 0 0 0 1px rgba(144, 84, 234, 0.2)
  &.__narrow
    max-width: 5em

.bg-1
  background-color: rgba(135, 80, 218, 0.15)

.bg-2
  background-color: rgba(255, 67, 67, 0.2)

.bg-yellow
  background: #deffae
  box-shadow: inset 0 0 0 1px #b9e07d

.view-padding-1
  box-shadow: inset 0 0 0 1px green
  background: rgba(38, 210, 0, 0.1)

.view-padding-2
  background: rgba(255, 0, 0, 0.1)
  box-shadow: inset 0 0 0 1px red

.gu1
  display: inline-block
  width: gu(1)
  height: gu(1)

$psw
  content: ''
  display: block
  position: absolute
  @extend .view-padding-1
  width: calc(var(--grid-gutter-width) / 2)
  top: 0
  bottom: 0

.show-padding
  :not(.no-gutters) > &
    position relative
    &:before
      @extend $psw
      left: 0
    &:after
      @extend $psw
      right: 0
    &.color-2
      &:before
      &:after
        @extend .view-padding-2

.colored-row
  margin-top: gu(2)
  height: gu(12)
  background: rgba(255,0,0,0.1)

.colored-row2
  background: rgb(181, 247, 233)
  background #b98fff
  box-shadow: none
  position relative
  z-index 1

.hi-row
  height: gu(12)