@import (reference) '../../../Style/App.less';

.Pager {
  // center align text by default (for mobile)
  .Pager-col {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  // boost the line height of the info component so it aligns vertically with the other parts
  .Pager-empty,
  .Pager-info {
    line-height: @button-height;
  }

  // remove the default pagination component margin
  .pagination {
    margin: 0;
  }

  // these styles capture non-mobile screens
  @media (min-width: @screen-md-min) {
    // we only apply this in non-mobile because the extra height in mobile is desired
    .Pager-col {
      height: @button-height;
      padding-left: @grid-gutter-width / 2;
      padding-right: @grid-gutter-width / 2;
    }

    .Pager-col-left {
      padding-left: 0;
      text-align: left;
    }

    .Pager-col-center {
      text-align: center;
    }

    .Pager-col-right {
      padding-right: 0;
      text-align: right;
    }
  }
}