// Partials / Code Examples

.block{
  .code-examples{
    width:100%;
    box-shadow:0 10px 120px 0 rgba(23,151,229,0.12);
    margin-top:70px;
    margin-bottom:40px;

    & > .inner{
      border-radius:4px;
      display:flex;
      flex-direction:row;
      box-shadow:0 3px 7px 0 rgba(0,0,0,0.15);
    }

    .code-nav{
      flex:0 0 250px;
      background-color:$code-examples-nav-bg-color;
      border-right:1px solid $code-examples-line-color;
      border-radius:4px 0 0 4px;
      padding:50px 20px;

      & > button{
        cursor:pointer;
        transition-duration:0.2s;
        transition-property:all;
        display:block;
        background: none;
        border: none;
        margin: 0 auto;
        margin-bottom:30px;
        opacity:0.3;

        &:last-child{
          margin-bottom:0;
        }

        &:hover{
          opacity:0.7;
        }

        &.active{
          opacity:1;
        }

        &:focus{
          outline:0;
        }

        svg{
          height:34px;
        }
      }
    }

    .code-content{
      flex-grow:1;
      background-color:$code-examples-bg-color;
      border-radius:0 4px 4px 0;

      .code-content-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        border-bottom:1px solid $code-examples-line-color;
        padding:16px 18px 16px 24px;
        line-height:19px;

        .title{
          position:relative;
          top:1px;
          color:#969bb0;
          font-size:14px;
          line-height:19px;
          font-weight:500;
          margin:0;
        }

        .lang{
          background-color:#8e98d4;
          color:$code-examples-bg-color;
          font-size:11px;
          line-height:15px;
          font-weight:500;
          padding:3px 6px;
          border-radius:2px;
        }
      }

      .code-example{
        padding:16px 24px;
        font-size:14px;
        line-height:26px;
      }

      code{
        white-space:pre-wrap;
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .code-examples{
      .code-nav{
        display:none;

        background-color: red;
      }
    }
  }
}
