@import 'variables';
@import 'mixins';

.widget-iterations-nav {
    text-align:right;

    .title {
        @include font-size(12, 12);
        margin-top:1px;
        text-align:right;
        padding-bottom:2px;
        margin-bottom:8px;
        strong {
            font-weight:$regular;
        }
    }
    .iterations {
        font-size:0; // Remove spacing between elements
        .current, a {
            text-decoration:none;
            display:inline-block;
            position:relative;
            margin-left:3px;

            @include width-medium() {
                margin-left:8px;
            }

            &:first-child {
                margin-left:0;
            }

            .idx {
                width:35px;
                height:28px;
                border-radius:2px;
                text-align:center;
                @include font-size(12, 28);
                border:1px solid;
            }
            .num-comments {
                display: inline-block;
                position:absolute;
                top:-8px;
                right:-6px;
                text-align:center;
                width:20px;
                .num {
                    z-index:2;
                    @include font-size(10, 13);
                    font-weight:$regular;
                    vertical-align:top;
                    padding-top:3px;
                    padding-right:1px;
                    display:inline-block;
                    color:#333;
                    position:relative;
                    position:relative;
                }
                &:after {
                    font-family: "Font Awesome 5 Pro"; 
                    font-weight: 900;
                    font-size: inherit;
                    text-rendering: auto;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    content: "\f075";
                    position:absolute;
                    left:0;
                    top:0;
                    @include font-size(19, 19);
                    z-index:1;
                }
            }
            .idx {
                color:#fff;
                border-color:#fff;
            }
            .num-comments {
                &:after {
                    color:#fff;
                    text-shadow: -1px -1px 0 $color-1,  1px -1px 0 $color-1, -1px 1px 0 $color-1, 1px 1px 0 $color-1;
                }
                .num { color:$color-1; }
            }
            &.current {
                .idx {
                    background: #fff;
                    border-color:#fff;
                    color:$color-1;
                }
            }
        }
    }
}

