/* ==========================================================================
   08_GENERALS: ASIDE
   ==========================================================================
   * README

   * ASIDE
   * ASIDE TOGGLEABLE PANEL
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Aside default styles.
 * That means they apply to the HTML you can find first thing inside
 * {% block aside %}{% endblock %}, and therefore, they apply only to the pages
 * that display this block.

 * If you need to deal with an exception to these Aside default styles, you
 * should manage it by adding a .aside--modifier class to the .aside element
 * and develop the given exception nested to this .aside--modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with styles for a new type of Aside component or a new
 * sub-element for an existing one, you should develop them in this stylesheet,
 * under a new component subtitle or under the correspondent one accordingly,
 * separating them in Structure, Behaviour or Appearance styles as appropriate.
 */

/* ASIDE
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.aside {
    width: 304px;
    padding-right: 24px;
    padding-bottom: 40px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.aside {
    position: fixed;
    z-index: 2;
    overflow-x: hidden;
}

/*
 * This media query max-width is the [class*="__wrapper"] max-width, defined in stylesheet #3.
 */

@media all and (max-width:1148px) {

    /* Behaviour
       -------------------------------------------------------------------------- */
    .aside {
        right: 0;
    }

}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .aside {
        width: 100%;
        padding: 0;
    }

    .aside > .button-bar:first-of-type {
        margin-bottom: 0;
        width: 100%;
        padding: 20px 20px;
    }

    .aside > .button-bar:first-of-type .button:last-of-type{
        margin-bottom: 0;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .aside {
        position: static;
        overflow: visible;
    }

    .aside > .button-bar:first-of-type {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
    }

    /* Appearance
       -------------------------------------------------------------------------- */
    .aside > .button-bar:first-of-type {
        -webkit-box-shadow: 0 0 12px 0 rgba(91, 91, 91, .3);
        box-shadow: 0 0 12px 0 rgba(91, 91, 91, .3);
        background: #FFFFFF;
    }

}

/* ASIDE TOGGLEABLE PANEL
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
#side-panel {
    width: 328px;
    padding: 0 24px 40px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
#side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    z-index: 3;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

#side-panel.side-panel__open {
    bottom: auto;
    left: -24px;
    overflow: visible;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

/* Appearance
   -------------------------------------------------------------------------- */
#side-panel {
    background: #FFFFFF;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    #side-panel {
        width: 100%;
        padding: 40px 24px 20px;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    #side-panel {
        position: fixed;
        top: 70px; /* This is the .header height */
        overflow-y: scroll;
    }

    #side-panel.side-panel__open {
        bottom: 0;
        left: 0;
        overflow-y: scroll;
    }

}