.template-navbar
{
  .navbar-toggle
  {
    background: #222;
    cursor: pointer;
    float: left;
    margin-left: 4px;
    margin-right: 0;
    position: relative;
    z-index: 2;

    .bar
    {
      border-top: 2px solid white;
      display: block;
      width: 15px;
      transition: 0.2s;
    }

    .icon
    {
      .bar;
      margin-top: 6px;
      padding: 3px 0;
      position: relative;

      &::before,
      &::after
      {
        content: '';
        position: absolute;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        .bar;
      }

      &::before
      {
        top: -6px;
      }

      &::after
      {
        top: 2px;
      }
    }

    &.xs-mobile-cta
    {
      float: right;
    }
  }

  .sliding-menu
  {
    background: white;
    display: none;
    height: 100vh;
    margin-left: -1px;
    overflow: auto;
    padding: 50px 6px 10px;
    position: fixed;
    transform: translateX(-100vw);
    transition: 0.2s;
    width: 100vw;;
    z-index: 1;
  }

  #sliding-menu-controller:checked
  {
    ~ .navbar-toggle
    {
      background: white;
      position: fixed;

      .icon
      {
        border-color: transparent;

        &::before,
        &::after
        {
          border-color: #222;
          top: -2px;
        }

        &::before
        {
          -webkit-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
          transform: rotate(135deg);
        }

        &::after
        {
          -webkit-transform: rotate(-135deg);
          -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
        }
      }
    }

    ~ .sliding-menu
    {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }
}
