
.woocommerce-ordering,
.woocommerce-pagination,
.gridlist-toggle {
    font-size: .9286em;//.8571em
}

.gridlist-toggle {
	float: $right;
	vertical-align: top;
	margin-left: 16px;

	> a {
		@include if-dark {
			background: $color-dark-3;
		}
		border-radius: $border-thin;
		color: #000;
		display: inline-block;
		font-family: "Porto";
		width: 1.5em;
		height: 1.5em;
		line-height: 2.15em;
		margin-#{$left}: 4px;
		text-decoration: none;
		text-align: center;
		@include transition($transition);
		
		&:hover{
			color: #000;
		}

		&:before {
			font-size: 1.28em;
		}
	}

	#grid:before { content: "\e880" }
	#list:before { content: "\e87b"; }
}

.woocommerce-ordering,
.woocommerce-viewing {
    select {
        font-size: 1em;
        padding: 0 25px 0 8px;
        //padding: side-values(0 0 0 .22em);
        margin-#{$left}: 7px;
        //height: 2.2em;
         box-shadow:none;
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        background: #fff url("../images/select-bg.svg") no-repeat scroll 100% 48% / 30px 60px;
        border: 1px solid #e4e4e4;
        height: 37px;
        text-indent: 0.01em;
        text-overflow: "";
    }
}

.woocommerce-viewing {
    display:inline-block;
    vertical-align: top;
}

.woocommerce-pagination {
    position: relative;
    text-align: $right;

    ul {
        display: inline-block;
        white-space: nowrap;
        padding: 0;
        margin: side-values(0 0 0 10px);
        clear: both;

        li {
            float: $left;
            margin-#{$left}: 5px;
            display: inline;
            padding: 0;

            a,
            span {
                @include if-dark {
                    background: $color-dark-3;

                    &.dots {
                        background: transparent;
                    }
                }
                //border: 1px solid $input-border-color;
                border: 1px solid #ccc;
                //border-radius: $border-thin;
                border-radius: 0;
                color: #7b858a;
                display: block;
                font-size: 15px;
                font-weight: 700;
                margin: 0 0 5px;
                padding: 0 .5em;
                line-height: 2.1em;
                min-width: 2.2em;
                height: 2.2em;
                text-decoration: none;
                text-align: center;
            }

            span.dots {
                border-width: 0;
                min-width: 0;
                padding: 0;
            }

            a:hover,
            a:focus,
            span.current {
                //color: $color-arrow-hover;
                color: #706f6c;
            }

            .prev,
            .next {
                text-indent: -9999px;
                //width: 2.2em;
                position: relative;
                height: 32px;
                line-height: 32px;
                padding: 0;
                width: 32px;
                &:before {
                    //font-family: "FontAwesome";
                    font-family: "porto";
                    font-size: 20px;
                    font-weight: normal;
                    line-height: 30px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    text-indent: 0;
                }
            }

            .prev:before {
                //content: if-ltr($fa-var-caret-left, $fa-var-caret-right);
                content: if-ltr('\e819', '\e81a');
            }

            .next:before {
                //content: if-ltr($fa-var-caret-right, $fa-var-caret-left);
                content: if-ltr('\e81a', '\e819');
            }
        }
    }
}

.shop-loop-before,
.shop-loop-after {
    font-size: 13px;

    label {
        margin-bottom: 0;
        vertical-align: middle;
    }
}

.shop-loop-before {
    .page-numbers {
        display: none;
    }
    .woocommerce-ordering,
    .woocommerce-pagination > *,
    .gridlist-toggle {
        margin-bottom: 15px;
    }
    
    .gridlist-toggle {
        margin-top: 7px;
    }

    .woocommerce-ordering {
        float: $left;
        margin-#{$right}: 20px;

        .column2 & {
            @media #{$screen-large} {

            }
        }

        &,
        .column2 & {
            @media #{$screen-medium} {
                text-align: $right;
                margin-#{$right}: 0;
                float: none;
            }
        }
    }

    .woocommerce-viewing {
        @media #{$screen-normal} {
            position: absolute;
            top: -2.2em;
            #{$right}: 0;
            margin-top: -15px;
        }

        .column2 & {
            @media #{$screen-large} {
                position: absolute;
                top: -2.2em;
                #{$right}: 0;
                margin-top: -15px;
            }
        }
    }

    .woocommerce-pagination {
        margin-bottom: -10px;
        float: $right;

        @media #{$screen-normal} {
            clear: both;
            float: none;
            margin-top: 15px;
            text-align: center;
        }

        .column2 & {
            @media #{$screen-large} {
                clear: both;
                float: none;
                margin-top: 15px;
                text-align: center;
            }
        }

        &,
        .column2 & {
            @media #{$screen-medium} {
                text-align: center;
            }
        }

        ul {
            @media #{$screen-normal} {
                margin-#{$left}: -5px;
            }

            .column2 & {
                @media #{$screen-large} {
                    margin-#{$left}: -5px;
                }
            }
        }
    }
}

.shop-loop-after {
    text-align: center;
    border-top: 1px solid #efefef;
    padding-top: 25px;
    .woocommerce-pagination {
        text-align: center;

        > * {
            margin-bottom: 15px;
        }
    }
    
    .woocommerce-viewing {
        float: left;
    }
    
    .page-numbers {
        clear: none;
        float: right;
    }
}

