.eshop-pagination {
  @extend                                                    .col-12 ;
  @extend                                                    .py-#{$pagination-spacing} ;
  @extend                                                    .px-#{ceil($pagination-spacing/2)} ;

  a {
    $this : &;

    &:first-child {
      .btn {
        border-left:                                        1px solid $pagination-border-color;
      }
    }

    .btn {
      background-color:                                     $pagination-bg-color;
      border-color:                                         $pagination-border-color;
      color:                                                $pagination-color;
      border-radius:                                        0px;
      border-left-style:                                    none;

      &:hover {
        background-color:                                   $light;
      }

      @extend                                                .py-#{ceil($pagination-spacing/2)} ;
      @extend                                                .px-#{$pagination-btn-spacing-x} ;
      @at-root #{$this}.active .btn {
        color:                                              $pagination-active-color !important;
        background-color:                                   $pagination-active-bg-color !important;
        border-color:                                       $pagination-border-color !important;
        &.disabled {
          background-color:                                 $gray-200 !important;
          color:                                            $black !important;
          cursor:                                           not-allowed;
        }
      }
      @at-root #{$this}.disabled .btn {
        color:                                              $pagination-disable-color !important;
        background-color:                                   $pagination-disable-bg-color !important;
      }
    }
  }
}
