.single-post-navigation {
    margin: rem(55px 0 53px);
    @media (max-width: $screen-sm) {
        margin: rem(30px 0);
    }

    .entry-navi-post {
        @media (max-width: $screen-sm) {
            margin: rem(10px 0 0);
            text-align: #{$left} !important;

            &.next-post {
                .entry-intro {
                    justify-content: flex-start !important;
                }
            }
        }

        .entry-intro {
            display: flex;
            align-items: center;
            color: $disable_color;

            .entry-icon {
                position: relative;
                font-size: 18px;
            }
        }

        .entry-text {
            display: block;
            padding-top: rem(7px);
            margin-bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            @include transition(all .3s ease);
        }

        &.prev-post {
            .entry-icon {
                margin-#{$right}: rem(12px);
            }
        }

        &.next-post {
            .entry-intro {
                justify-content: flex-end;
            }

            .entry-icon {
                margin-#{$left}: rem(12px);
            }
        }

        &:hover {
            .entry-text {
                color: $hover_color;
            }
        }
    }
}