.pagination {
  $pagination-btn-number: 7;
  $pagination-btn-width: round((100%/$pagination-btn-number)*1000)/1000; // round to third decimal after a point
  $pagination-btn-indent: $pagination-btn-width/10;

  $pagination-pages-btn-number: 5;
  $pagination-pages-btn-width: round((100%/$pagination-pages-btn-number)*1000)/1000; // round to third decimal after a point

  @include clearfix;
  display: flex;
  text-align: center;

  a, em {
    display: inline-block;
    width: 100%;
    border-radius: 5px;
    transition: 0.5s all;
    text-decoration: none;
  }

  .prev-btn,
  .next-btn {
    a, em {
      color: #fff;
      background-color: #e85c33;

      &:hover {
        background-color: #333;
      }

      &.empty {
        visibility: hidden;
      }
    }
  }

  .prev-btn {
    flex: 0 0 $pagination-btn-width;
    padding-right: $pagination-btn-indent;
  }

  .pagination-links-wrapper {
    display: flex;
    flex: 0 0 5*$pagination-btn-width;
    padding-right: $pagination-btn-indent;
    padding-left: $pagination-btn-indent;

    .pagination-link {
      flex: 0 0 $pagination-pages-btn-width;

      min-height: 1px; // fix for 0 height if there is no content (because of float:left;)

      a, em {
        max-width: 50px;

        &:hover,
        &.current {
          color: #fff;
          background-color: #41b7d8;
        }
      }
    }
  }

  .next-btn {
    flex: 0 0 $pagination-btn-width;
    padding-left: $pagination-btn-indent;
  }
}