/* read next nav links */
/*

```html
<nav class="read-next">
    <h4 class="read-next-title">...</h4>
    <div class="navlinks">
        <a href="/prev.html" class="navlinks-prev" title="Prev Post">...</a>
        <a href="/next.html" class="navlinks-next" title="Next Post" >...</a>
    </div>
</nav>
```
*/

@read-next: read-next;

.@{read-next} {
    margin: 1rem 0rem 0;
    font-weight: bold;
    //background: #f8f8f8;
    border-top: 1px solid #f1f1f1;
    //box-shadow: inset 0 3px 6px -6px rgba(0, 0, 0, 0.45);

    &-title {
        margin: 0;
        font-size: 1.5em;
        text-align: center;
        color: #AAA;
    }

    .navlinks-prev,
    .navlinks-next {
        display: block;
        padding: 1em;
        font-size: 1.5rem;
        line-height: 1.1;

        &:before {
            display: block;
            width: 24px;
            height: 24px;
            margin-bottom: .5em;
            color: #888;
            opacity: .4;
            transition: opacity .3s;
        }

        &:hover:before {
            opacity: .6;
        }
    }

    .navlinks-prev { padding-bottom: .5em; }
    .navlinks-next { padding-top:    .5em; }

    .navlinks-prev {
        text-align: left;
        border-right: 1px solid #f1f1f1;

        &:before {
            content: url(/i/ic_fast_rewind_24px.svg);
        }
    }

    .navlinks-next {
        text-align: right;

        &:before {
            content: url(/i/ic_fast_forward_24px.svg);
        }
    }

    @media screen and (min-width: @smscreen) {

        .navlinks {
            display: table;
            width: 100%;
            border-collapse: collapse;

            > a + a {
                //border-left: 1px solid #f1f1f1;
            }

            > a:only-child {
                width: 100%;
                text-align: center;
            }

            a:hover {
                background: #FFF;
            }
        }

        .navlinks-prev,
        .navlinks-next {
            display: table-cell;
            vertical-align: top;
            box-sizing: border-box;
            width: 50%;
            font-size: 2rem;
            padding: 2em;
        }
    }
}
