//
// Code (inline and block)
// --------------------------------------------------


// Inline and block code styles
code,
kbd,
pre,
samp
  font-family $font-family-monospace

// Inline code
code
  padding 2px 4px
  font-size 90%
  color $code-color
  background-color $code-bg
  border-radius $border-radius-base

// User input typically entered via keyboard
kbd
  padding 2px 4px
  font-size 90%
  color $kbd-color
  background-color $kbd-bg
  border-radius $border-radius-small
  box-shadow inset 0 -1px 0 rgba(0, 0, 0, .25)

  kbd
    padding 0
    font-size 100%
    font-weight bold
    box-shadow none

// Blocks of code
pre
  display block
  padding (($line-height-computed - 1) / 2)
  margin 0
  font-size ($font-size-base - 1) // 14px to 13px
  line-height $line-height-base
  word-break break-all
  word-wrap break-word
  color $pre-color
  background-color $pre-bg

  // Account for some code outputs that place code tags in pre tags
  code
    padding 0
    font-size inherit
    color inherit
    white-space pre-wrap
    background-color transparent
    border-radius 0

// Enable scrollable blocks of code
.pre-scrollable
  max-height $pre-scrollable-max-height
  overflow-y scroll

/*------------------------------------
- Code
------------------------------------*/

.code-preview
  padding: 20px
  
// Code snippet
// Styles to make a stacked code view

.code-snippet
  border: 1px solid $gray-lighter
  border-radius: 3px
  margin: 30px 0 20px

  > *
    border-bottom: 1px solid $gray-lighter!important
  

  > *:last-child
    border-bottom: none!important

  :not(pre) > code[class*="language-"],
  pre[class*="language-"]
    margin: 0
    border: 0
    border-radius: 0

  .code-preview
    position: relative
    padding-top: 35px

    &::before
      position: absolute
      top: 8px
      right: 12px
      color: $pale-text-color
      text-transform: uppercase
      letter-spacing: 1px
      font-size: 11px
      font-weight: 600
      content: "Example"

////////////////////////////////////////////////////
// Prism
// Styles to overwrite Prismjs css.
////////////////////////////////////////////////////

:global
  pre .language-name
    background-color: transparent
    color: $pale-text-color
    text-transform: uppercase
    letter-spacing: 1px
    font-weight: 600
    cursor: default
    position: absolute
    top: 8px
    right: 10px
    
:global
  :not(pre) > code[class*="language-"],
  pre[class*="language-"]
    background-color: #f9f9f9
    border-color: $gray-lighter
    padding-bottom: 25px
    margin-top: 15px
    margin-bottom: 25px
    word-wrap: normal

:global
  pre[class*="language-"]
    padding-top: 30px

:global
  .line-numbers .line-numbers-rows
    border-right-color: #ddd

:global
  .line-numbers-rows > span:before
    color #ddd

:global
  pre[class*='language-'][data-language]::before
    display: none


// // Code window
// //
// // Styles to make an iOS type window.

// .code-window

//   border: 1px solid $gray-lighter
//   border-radius: 3px
//   margin: 30px 0 20px
//   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.07)

//   .window-bar
//     height: 38px
//     border-top: 1px solid $code-window-border-top-color
//     border-bottom: 1px solid $code-window-border-bottom-color
//     background: $code-window-bg-color

//     .circles
//       margin: 3px 10px
//       float: left

//       .circle
//         display: inline-block
//         width: 8px
//         height: 8px
//         border-radius: 50%
//         background-color: $color-white
//         border: 1px solid $color-white
      

//       .circle-red
//         background-color: $code-window-circle-red-bg
//         border-color: $code-window-circle-red-border
      

//       .circle-yellow
//         background-color: $code-window-circle-yellow-bg
//         border-color: $code-window-circle-yellow-border
      

//       .circle-green
//         background-color: $code-window-circle-green-bg
//         border-color: $code-window-circle-green-border
      

//       .window-title
//         margin-left: 16px
//         font-size: 13px
//         color: $light-gray-text-color
      
    

//     .languages
//       margin: 3px 10px
//       float: right

//       .btn-group
//         box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.07)
      

//       .btn
//         padding: 2px 10px
//         background-color: $color-white
//         color: $pale-text-color
//         text-transform: uppercase
//         font-size: 12px
//         font-weight: 500
//         transition: .5s ease

//         &.active,
//         &:active
//           color: $color-info
//           box-shadow: none

//   :not(pre) > code[class*="language-"],
//   pre[class*="language-"]
//     background-color: $color-white
//     border: none
//     margin: 0
//     //padding-top: 0
//     padding-bottom: 8px
  

//   pre[class*='language-'][data-language]::before
//     display: none
  

//   .line-numbers .line-numbers-rows
//     background-color: $code-window-line-bg-color
//     border-right: none
//     padding-bottom: 8px
  

//   .line-numbers-rows > span:before
//     color: $pale-text-color
  

//   .line-numbers:after
//     content: ''
//     background-color: $code-window-line-bg-color
//     display: inline-block
//     position: absolute
//     top: 0
//     left: 0
//     width: 39px
//     height: 32px
  



// // Code snippet
// //
// // Styles to make a stacked code view
// .code-snippet
//   border: 1px solid $gray-lighter
//   border-radius: 3px
//   margin: 30px 0 20px

//   > *
//     border-bottom: 1px solid $gray-lighter!important
  

//   > *:last-child
//     border-bottom: none!important
  

//   :not(pre) > code[class*="language-"],
//   pre[class*="language-"]
//     margin: 0
//     border: 0
//     border-radius: 0
  

//   .code-preview
//     position: relative
//     padding-top: 35px

//     &::before
//       position: absolute
//       top: 8px
//       right: 12px
//       color: $pale-text-color
//       text-transform: uppercase
//       letter-spacing: 1px
//       font-size: 11px
//       font-weight: 600
//       content: "Example"
    
  



// // Code tabs
// //
// // Styles to make a tabbed code view
// .code-tabs

//   margin: 20px 0

//   .languages
//     border-bottom: 1px solid $gray-lighter

//     .btn
//       padding: 10px 15px
//       background-color: $color-white
//       color: $pale-text-color
//       text-transform: uppercase
//       font-size: 14px
//       font-weight: 500
//       letter-spacing: 1px
//       transition: .5s ease

//       &.active,
//       &:active
//         color: $accent-color
//         box-shadow: none
      
    
  

//   pre
//     margin: 0
//     border: 0
//     border-radius: 0

//     &::before
//       display: none!important
    
  

//   .code-preview
//     background-color: $bg-color
  

//   .window-content
//     border-bottom: 1px solid $gray-lighter-light
  



// // Media queries
// @media screen and (max-width: 991px)

//   .clipboard-copy
//     top: 8px !important
//     right: 8px
//     color: $pale-text-color
//     background-color: transparent
//     text-transform: uppercase
//     letter-spacing: 1px
//     font-weight: 600
//     opacity: 1
//     padding: 0

//     &:hover,
//     &:focus
//       color: $light-text-color
//       background-color: transparent
    
  

//   pre[class*='language-'][data-language]::before
//     right: 56px
  

//   pre .language-name
//     right: 56px
  



// @media screen and (max-width: 480px)

//   .code-window .window-bar .languages .btn
//     padding: 2px 6px
  


