/* *** MODULE sidebar off-canvas *** */
// En version mobile, si js est actif un bouton
// est créé. Il permet de faire glisser le sidebar
// depuis la droite de l'écran en repoussant le
// main à gauche.

// Par défaut le bouton n'est pas affiché ; il ne
// le sera que sur les petits écrans.
#offcanvas-on {
  display: none;
}
// Sexy glissando
.sidebar,
#main {
  @include transition(0.3s all linear);
}
// Dégager la place de l'icône d'ouverture
.js #content-info h2,
.js .content-info__feed {
  margin-right: 3.5em;
}

@media screen and(max-width: $xlarge-screen) {
  // les boutons
  #offcanvas-on,
  #offcanvas-off {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    height: 2.5em;
    width: 2.5em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: none;
    padding: 0;
  }
  #offcanvas-on:hover,
  #offcanvas-on:focus,
  #offcanvas-off:hover,
  #offcanvas-off:focus {
    background-color: $gray-very-dark;
  }
  //ouverture
  #offcanvas-on {
    display: block;
    background-color: $white;
    background-image: inline-image('icon_open-sidebar.svg'), none;
    border: 0.1em solid $gray-dark;
    border-radius: 0.25em;
  }
  // fermeture
  #offcanvas-off {
    background-color: $gray-very-dark;
    background-image: inline-image('icon_close.svg'), none;
    border: 1px solid $white;
  }
  // le layout de positionnement du sidebar
  #wrapper {
    position: relative;
  }
  .off-canvas #main,
  .footer.off-canvas {
    float: left;
    margin-left: -1 * (zen-grid-item-width(8));
  }
  .off-canvas .sidebar {
    position: relative;
    @include zen-grid-item(11, 1, right);
  }
}