@require './palette.styl'

html, body {
  color: $textColor;
  background: $bgColor;
  font-family 'Century Gothic', AppleGothic, 'CenturyGothic', apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
}

// Overrides of vuepress
:root {
  h1, h2, h3, h4, h5, h5 {
    font-weight: 400;
  }
  h1, h2 {
    color: $accentColor;
  }
  h2 {
    border: none
  }
  h4 {
    font-weight: bold;
  }
  p, ul, ol {
    line-height 2 // prevent inline code block from colliding with each other
  }
  .navbar {
    background-color: $navbarBg;
    border: none;
    position: sticky;
    top: 0;
    z-index: 102;
    .links {
      background-color: transparent;
    }
  }

  .sidebar {
    background-color: $sidebarBg;
    z-index: 101;
  }

  .content__default {
    max-width: 60em; 
    margin: 0 auto;
    padding: 0 4%;
  }

  a {
    font-weight: bold;
  }

  a .icon {
    margin-left: $s-small;
  }

  // Custom blocks
  .custom-block {
    background-color $c-purple-light
    color: $textColor
    &.tip, &.warning, &.danger {
      background-color $c-purple-light
    }
    &.tip {
      border-color $c-green
    }
    &.warning {
      border-color $c-yellow
      .custom-block-title {
        color $c-yellow
      }
    }
    &.danger {
      border-color $c-red
      .custom-block-title {
        color $c-red
      }
    }
  }

  // Code formating
  .content__default {
    code {
      color $c-orange
      padding 0.25rem 0.5rem
      margin 0
      font-size 0.85em
      background-color transparent
      border 1px solid $c-orange
      border-radius 3px
      user-select all // autoselect smaller inline styles but not larger code blocks that has a language specified
    }
    pre {
      code {
        border none
      }
    }
    .language-javascript, .language-js, .language-jsx {
      code {
        user-select auto
      }
    }
  }

}

// Own components
hr
  border 0
  border-top 1px solid $borderColor
  position relative
  margin-top 4rem
  margin-bottom 2rem
  overflow visible
  &:after
    content ''
    display block
    position absolute
    top -0.5rem
    left 0
    width 4rem
    height .875rem
    padding-right 1rem
    background: $c-purple url('/assets/img/symbols.svg') no-repeat;


.example-anim {
  background: #f1e2d7;
  width: 100%;
  height: 300px;
  position: relative;
  svg {
    overflow: visible // for overshoots animations
  }
}

// Temp button. Use the "material design" button from the original site instead
.button {
  background: $accentColor;
  color: $textColor;
  border: none;
  padding: 1em 2em;
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  &--secondary {
    background: $c-purple;
    border: 1px solid $accentColor;
    color: $accentColor;
  }
  &--icon {
    background: transparent;
    font-size: 2rem;
    padding: 0.4em;
    line-height: 1;
    color: $accentColor;
  }
}

.button + .button {
  margin-left: 0.5rem
}

blockquote {
  display: flex;
  align-items: center;
  border: none;
  color: inherit;
  padding-left: 0;
  &:before {
    content: "";
    display: block;
    height: 4rem;
    width: 0.875rem; // 0,21875;
    background: url('/assets/img/symbols_vertical.svg') no-repeat;
    border-right: 2px solid $accentColor;
    margin-right: 1rem;
    padding-right: 1rem;
  }
}

// MojsCode / MojsInteractive components
.mojs-interactive__code {
  position: relative;
  padding-bottom: 1.2em;
}
.mojs-interactive__code .buttons {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.mojs-interactive__result {
  position: relative;
}
.mojs-interactive__result {
  background: #f1e2d7;
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.mojs-interactive__result--dark {
  background: $c-purple-dark;
}
.mojs-interactive__result--transparent {
  background: none
}
.mojs-interactive__result svg {
  overflow: visible
}

.mojs-interactive__controller {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mojs-interactive__controller .controller {
  position: absolute
}
.mojs-interactive__clicknotice {
  font-size: 0.85em
  color: $c-white
  background: $c-purple-light
  padding: $s-small $s-large
  margin: 0
}


// Some helpclasses
:root {
  .no-pointer {
    pointer-events: none;
  }

  .measure-grid {
    background: $c-creamy url('/assets/img/measure-grid.svg') repeat-x;
    background-size: 2000px 1000px;
    background-position: center left;
  }
}