@import '../index'

.list-pagify
  background-color:  $app['palette']['bg-primary']['1']
  clear: both
  margin: 0
  padding: 0.5em
  display: flex;
  border-radius: 0 0 1em 1em;

.list-pagify > li
  text-decoration: none
  display: inline

.list-pagify .button.num > .icon
  width: inherit

.list-pagify .icon.num,
.list-pagify .button.num,
.list-pagify .num-selected
  padding: 0
  margin: 0 .2em
  width: 2em
  height: 2em
  line-height: 2em
  text-align: center
  vertical-align: middle
  border-radius: 1em
  user-select: none;
  cursor: pointer;

.list-pagify .button.num
  background-color:  $app['palette']['bg-secondary']['1']
  border: 1px solid  $app['palette']['bg-secondary']['1']
  color:  $app['palette']['text-secondary']['1']

.list-pagify .button.num svg,
.list-pagify .button.num path
  fill:  $app['palette']['text-secondary']['1']

.list-pagify .button .label
  background-color: transparent;
  padding: 0;

.list-pagify .num-selected
  background-color:  $app['palette']['bg-thirdary']['1']
  border: 1px solid  $app['palette']['border-thirdary']
  color:  $app['palette']['text-thirdary']['1']

.list-pagify .button.num:hover
  background-color:  $app['palette']['bg-thirdary']['1']
  border: 1px solid  $app['palette']['border-thirdary']
  color:  $app['palette']['text-thirdary']['1']

.list-pagify .button.num:hover svg,
.list-pagify .button.num:hover path
  fill:  $app['palette']['text-secondary']['1']