$border-primary: #efefef !default;
$blue : #4ab2cd !default;


.dl__pagination{
  $this : &;

  &.dl__pinPagination{ 
	position: absolute;
	bottom:0px;  
	left: 50%;
	transform: translateX(-50%); 
	width: 357px;
	z-index: 200;

	.dl__pagination__wrapper{
	  background: #fff;
	}
  }

  &__wrapper{
  @extend .cf;
  position: relative;
	border: 1px solid $border-primary;
	border-radius: 3px;
	padding: 0 9px 0 82px;
	max-width: 357px;
	width: 100%;
	margin: 18px auto;

	>div{
	  width: 6%;
	  float: left;
	}

  #{$this}__indicator{
	  @include col(8);
	}
  }

  &__indicator{
	text-align: center;
	padding-left: 2%;
  height: 24px;
  position: relative;

	>span,
	>#dl__pagination__pageForm{
	  display: inline-block;
	  @include col(3);
	  margin: 0 0 0 0;
	  font-size: 12px;
	  line-height: 24px;
	}

	>span{
	  &:first-of-type{
		text-align: right;
	  }

	  &:last-of-type{
		text-align: left;
		font-weight: 700;
	  }
	}

	span:nth-of-type(2){
	  width: 24px;
	}

	input[type="text"]{
	  height: 18px;
	  max-width: 48px;
	  text-align: center;
	  font-weight: 700;
	  margin-top: 0;
	  font-size:12px;
	}

  }

  &__first,
  &__prev,
  &__next,
  &__last{
	position: relative;
	//width: 33px;
  height: 24px;

	&:after{
	  font-family: FontAwesome;
	  position: absolute;
	  display: block;
	  width: 100%;
	  height: 24px;
	  line-height: 24px;
	  font-size: 12px;
	}

	&:hover{
	  color: $blue;
	  cursor: pointer;
	}
  }

  &__first{
	&:after{
	  content: $fa-var-step-backward;
	  text-align: left;
	}
  }
  &__prev{
	&:after{
	  content: $fa-var-chevron-left;
	  text-align:center;
	}
  }
  &__next{
	&:after{
	  content: $fa-var-chevron-right;
	  text-align: center;
	}
  }
  &__last{
	&:after{
	  content: $fa-var-step-forward;
	  text-align: right;
	}
  }

  &__loading{
    position: absolute;
    height: 15px;
    width: 23% !important;
    background: white;
    top: 4px;
    left: 34%;

    &:after{
      @include faPseudo($fa-var-spinner,2px,0,0,40%);
      color: #333;
      font-size: 11px;
      line-height: 11px;
      width: 11px;
      height: 11px;
      @extend .fa-spin;
    }
  }

  &--loading{
    opacity: 0.6;

    &:hover{
      color: #333;
    }
  }

  div.dl__pagination__perPageWrapper{
    position: absolute;
    left: 6px;
    width: 48px;
    height: 30px;
    top: 2px;

    &:after{
      @include faPseudo($fa-var-caret-down, 3px, 6px, 0, auto);
      font-size: 14px;
      color: #aaa;
      pointer-events: none;
    }

    span{
      position: absolute;
      top: 22px;
      // background: #dedede;
      color: #444;
      display: block;
      width: 100%;
      height: 14px;
      // padding: 0 6px 0 0;
      text-align: center;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
      font-size: 9px;
      line-height: 8px;
    }

    select {
      display: inline-block;
      appearance: none;
      -webkit-appearance: none;
      border: none;
      position: absolute;
      top: 0px;
      width: 100%;
      height: 20px;
      border-radius: 0;
      padding: 0 0 0 6px;
      color: #aaa;

      &:hover{
        cursor: pointer;
      }
    }
  }
}