/*------------------------------------*\
    BASE
\*------------------------------------*/

.ajax-posts {
    position: relative;
    overflow: hidden;
}

/*
 * To hide and show the filters, we wrap the filters and the content in a view that is bigger than its parent
 * container, that has its overflow hidden. By default the filters are not shown, and gets translated out of the view.
 * With JavaScript we toggle the filters in and out of the view, by translating the X position of the view.
 *
 * This gives a smoother transition than working with changes in the width or the margin.
 */
.ajax-posts__view {
    transition: 0.2s ease;
    width: 200%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    will-change: tranform;
}

.ajax-posts aside,
.ajax-posts__posts {
    opacity: 1;
}

/* Change opacity to give the user feedback that new posts are loading */
.ajax-posts.is-waiting .ajax-posts__posts,
.ajax-posts.is-waiting aside {
    opacity: 0.5;
}

.ajax-posts aside {
    width: 50%;
    float: left;
    overflow: hidden;
    min-height: 1px; /* Show empty filterlist when there is only one post to keep the view intact. */
}

.ajax-posts__posts {
    width: 50%;
    float: left;
}

.ajax-posts.is-expanded-filters .ajax-posts__view {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

@media screen and (min-width: 35rem) {
    .ajax-posts__view {
        width: 150%;
        -webkit-transform: translateX(-33.33%);
        -ms-transform: translateX(-33.33%);
        transform: translateX(-33.33%);
    }

    .ajax-posts aside {
        width: 33.33%;
    }

    .ajax-posts__posts {
        width: 66.66%;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        float: left;
    }
}


@media screen and (min-width: 62rem) {
    .ajax-posts__view {
        width: 133%;
        -webkit-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    .ajax-posts aside {
        width: 25%;
    }

    .ajax-posts__posts {
        width: 75%;
    }
}

/*------------------------------------*\
    BUTTONS AND MESSAGES
\*------------------------------------*/

.ajax-posts__show-recipes-text,
.ajax-posts__hide-filters-text  {
    display: none;
}

.ajax-posts.is-expanded-filters .ajax-posts__filter-recipes-text {
    display: none;
}

.ajax-posts__screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.ajax-posts__load-more {
    flex: 0 0 100%;
}

/* On small screen we can't see the posts when the filer is visible */
@media screen and (max-width: 34rem) {
    .ajax-posts.is-expanded-filters .ajax-posts__show-recipes-text {
        display: block;
    }
}

/* On small screen we see the posts when the filer is visible, so we need a differen text */
@media screen and (min-width: 35rem) {
    .ajax-posts.is-expanded-filters .ajax-posts__hide-filters-text {
        display: block;
    }
}

/*------------------------------------*\
    FILTERS
\*------------------------------------*/

.ajax-posts__filterlist {
    margin-bottom: 1rem;
}

.ajax-posts__filters ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
}

.ajax-posts__filter {
    display: block;
}

.ajax-posts__filter:after{
    background: #f0efea;
    color: #27ae60;
    width: 15px;
    height: 15px;
    content: '';
    margin-right: 5px;
    margin-top: 4px;
    float: right;
}

.ajax-posts__filter:hover:after,
.ajax-posts__filter.is-active:after {
    content: '✔';
    background: none;
}

.ajax-posts__filterlist li:nth-child(n+6) {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.2s ease;
}

.ajax-posts__filter-toggle {
    padding: 5px;
}

.ajax-posts__filter-toggle a:after {
    margin-left: 5px;
    content: "\25BE";
    display: inline-block;
}

.ajax-posts__filter-toggle-hide {
    display: none;
}

.ajax-posts__filter-toggle-hide:after {
    transform: rotate(180deg);
    position: relative;
    top: 1px;
}

.ajax-posts__filterlist.is-collapsed li:nth-child(n+6) {
    max-height: 35px;
}

.is-collapsed .ajax-posts__filter-toggle-hide {
    display: block;
}

.is-collapsed .ajax-posts__filter-toggle-show {
    display: none;
}

/*------------------------------------*\
    POSTS
\*------------------------------------*/

.ajax-posts__post {
    width: 100%;
}

.ajax-posts__post article {
    overflow: hidden;
}

.ajax-posts__post > a {
    display: block;
}

.ajax-posts__post img {
    width: 100%;
}


@media screen and (min-width: 35rem) {
    .ajax-posts__post {
        /* IE11 doesn't support calc in flex-basis. 1.8rem padding, diveded by 2, the amount of items in a row */
        width: calc(50% - 0.9rem);
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 35rem) and (max-width: 61rem) {
    .is-expanded-filters .ajax-posts__post:nth-child(n+6) {
        margin-right: 50%; /* fake a second element to break the flow */
    }
}

@media screen and (min-width: 62rem) {
    .ajax-posts__post {
        /* IE11 doesn't support calc in flex-basis. Two times 1.8rem padding, diveded by 3, the amount of items in a row */
        width: calc(33.33% - 1.2rem);
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .is-expanded-filters .ajax-posts__post:nth-child(2n) {
        margin-right: 33.33%; /* fake a third element to break the flow */
    }
}

/*------------------------------------*\
    SPINNER
\*------------------------------------*/

.ajax-posts__spinner {
    clear: both;
    display: none;
    position: absolute;
    left: 50%;
    top: 70px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 10px solid red;
    -webkit-animation: ajax-posts__spinner 8s infinite linear;
    animation: ajax-posts__spinner 8s infinite linear;
}

.ajax-posts.is-waiting .ajax-posts__spinner {
    display: block;
}

@-webkit-keyframes ajax-posts__spinner {
    0%, 100%{ border: solid 20px #68C3A3; }
    6.25% { border: solid 2px #68C3A3; }
    12.5% { border: solid 2px #52B3D9; }
    18.75% { border: solid 20px #52B3D9; }
    25% { border: solid 20px #52B3D9; }
    31.25% { border: solid 2px #52B3D9; }
    37.5% { border: solid 2px #F4D03F; }
    43.75% { border: solid 20px #F4D03F; }
    50% { border: solid 20px #F4D03F; }
    56.25% { border: solid 2px #F4D03F; }
    62.5% { border: solid 2px #D24D57; }
    68.75% { border: solid 20px #D24D57; }
    75% { border: solid 20px #D24D57; }
    81.25% { border: solid 2px #D24D57; }
    87.5% { border: solid 2px #68C3A3; }
    93.75% { border: solid 20px #68C3A3; }
}

@keyframes ajax-posts__spinner {
    0%, 100%{ border: solid 20px #68C3A3; }
    6.25% { border: solid 2px #68C3A3; }
    12.5% { border: solid 2px #52B3D9; }
    18.75% { border: solid 20px #52B3D9; }
    25% { border: solid 20px #52B3D9; }
    31.25% { border: solid 2px #52B3D9; }
    37.5% { border: solid 2px #F4D03F; }
    43.75% { border: solid 20px #F4D03F; }
    50% { border: solid 20px #F4D03F; }
    56.25% { border: solid 2px #F4D03F; }
    62.5% { border: solid 2px #D24D57; }
    68.75% { border: solid 20px #D24D57; }
    75% { border: solid 20px #D24D57; }
    81.25% { border: solid 2px #D24D57; }
    87.5% { border: solid 2px #68C3A3; }
    93.75% { border: solid 20px #68C3A3; }
}

/*------------------------------------*\
    CUSTOM STYLING

    When you copy the css and want to
    remove the styling of this plugin,
    you can skip this part.
\*------------------------------------*/

.ajax-posts button {
    display: block;
    margin: 2rem auto;
    padding: 0.7em 1.5em 0.6em 1.5em;
    background: #a6a6a6;
    color: white;
    border: 1px solid #a1a1a1;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 1.2px;
    font-weight: bold;
    transition: background 0.2s ease;
    outline: none;
}

.ajax-posts button:hover {
    background: #999;
}

.ajax-posts__status {
    margin: 1rem auto;
    background: rgba(255, 0, 0, 0.53);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    width: 80%;
    max-width: 400px;
    text-align: center;
    font-weight: bold;
}

.ajax-posts .ajax-posts__toggle-filter {
    margin-left: 0;
}

.ajax-posts-message {
    text-align: center;
}

.ajax-posts-message--empty {
    width: 100%;
    margin-top: 2rem;
    color: #999;
}

.ajax-posts__filters h3 {
    margin: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: bold;
}

.ajax-posts__filter {
    color: #333;
    border-top: 1px dashed #B9B9B4;
    padding: 5px;
}

.ajax-posts_filters li:last-child a {
    border-bottom: 1px dashed #B9B9B4;
}

.ajax-posts__filter:hover,
.ajax-posts__filter.is-active, {
    color: #27ae60;
    text-decoration: none;
}

.ajax-posts__post {
    padding-bottom: 1.8rem;
}

.ajax-posts__post h3 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0.8rem;
}

.ajax-posts__post img {
    transition: 0.2s ease;
    width: 100%;
}

.ajax-posts__post:hover img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

@media screen and (min-width: 35rem) {
    .ajax-posts__filters {
        padding-right: 1.8rem;
    }
}