_navigation-pagination.scss

/*****
Code by: Elron
Initialy coded for: https://elrons.co.il/
Learn more about this code here: https://elrons.co.il/pagination/
*****/
nav.navigation.pagination {
    div.nav-links {
        text-align: center;
        display: flex;
        justify-content: center;
        .page-numbers {
            padding: 0.7em 1em 0.6em;
            display: inline-flex;
            align-items: center;
            line-height: 1em;
            margin: 0.18em;
            &.prev,
            &.next {
                display: inline-block;
                &:before {
                    font-weight: 400;
                    font-size: 0.7em;
                    display: block;
                    line-height: 1;
                    margin: 0 0 0.4em;
                }
            }
            &.prev {
                &:before {
                    content: "<<< אל ההווה";
                }
            }
            &.next {
                &:before {
                    padding-inline-end: 0.2em;
                    content: "אל העבר >>>";
                }
            }
            &.current {
                position: relative;
                padding: 0.15em 0.7em !important;
                font-weight: bold;
                font-size: 1.3em;
                display: inline-flex;
                align-self: flex-start;
                &:before {
                    content: "אתם פה";
                    font-weight: 400;
                    display: block;
                    position: absolute;
                    right: 50%;
                    font-size: 0.5em;
                    line-height: 1;
                    top: 3.5em;
                    width: 3em;
                    opacity: 0.5;
                    margin-right: -1.5em;
                }

                &:after {
                    width: 1px;
                    height: 0.3em;
                    background: black;
                    display: block;
                    content: "";
                    position: absolute;
                    right: 50%;
                    top: 1.2em;
                    opacity: 0.3;
                }
            }
        }
        a.page-numbers {
            border-width: 0.2em;
            &:visited {
                border-color: #dedede;
                &:hover,
                &:focus {
                    border-color: $color__link;
                }
                &:active {
                    border-color: $color__link_initial;
                }
            }
            &:active {
                &:before {
                    background: none;
                }
            }
        }
    }
}