/** @component pagination */
@import '../../settings/core';
@import '../../tools/mixins/core';

$pagination-height: rem-calc(24) !default;
$pagination-margin: rem-calc(-5) !default;

$pagination-li-float: $default-float !default;
$pagination-li-height: rem-calc(24) !default;
$pagination-li-font-color: $cui-black-100 !default;
$pagination-li-font-size: rem-calc(14) !default;
$pagination-li-margin: rem-calc(5) !default;

$pagination-link-pad: rem-calc(1 10 1) !default;
$pagination-link-font-color: $cui-gray-50 !default;
$pagination-link-active-bg: scale-color($cui-white-100, $lightness: -10%) !default;

$pagination-link-unavailable-cursor: default !default;
$pagination-link-unavailable-font-color: $cui-gray-50 !default;
$pagination-link-unavailable-bg-active: transparent !default;

$pagination-link-current-background: $cui-theme-50 !default;
$pagination-link-current-font-color: $cui-white-100 !default;
$pagination-link-current-font-weight: $font-weight-bold !default;
$pagination-link-current-cursor: default !default;
$pagination-link-current-active-bg: $cui-theme-50 !default;

@mixin pagination-container($center: false) {
  @if $center {
    text-align: center;
  }
}

@mixin pagination-unavailable-item {
  a,
  button {
    color: $pagination-link-unavailable-font-color;
    cursor: $pagination-link-unavailable-cursor;
  }

  &:hover a,
  & a:focus,
  &:hover button,
  & button:focus {
    background: $pagination-link-unavailable-bg-active;
  }
}

@mixin pagination-current-item($has-anchor: true) {
  @if $has-anchor {
    a,
    button {
      font-weight: $pagination-link-current-font-weight;
      color: $pagination-link-current-font-color;
      cursor: $pagination-link-current-cursor;
      background: $pagination-link-current-background;

      &:hover,
      &:focus {
        background: $pagination-link-current-active-bg;
      }
    }
  } @else {
    background: $pagination-link-current-background;
    color: $pagination-link-current-font-color;
    cursor: $pagination-link-current-cursor;
    font-weight: $pagination-link-current-font-weight;
    height: auto;
    padding: $pagination-link-pad;

    @include radius;

    &:hover,
    &:focus {
      background: $pagination-link-current-active-bg;
    }
  }
}

@mixin pagination(
  $center: false,
  $cui-gray-50-style: true,
  $use-default-classes: true
) {
  @if $cui-gray-50-style {
    display: block;
    margin-#{$default-float}: $pagination-margin;
    min-height: $pagination-height;

    li {
      height: $pagination-li-height;
      font-size: $pagination-li-font-size;
      color: $pagination-li-font-color;
      margin-#{$default-float}: $pagination-li-margin;

      a,
      button {
        @include radius;
        @include single-transition(background-color);

        display: block;
        padding: $pagination-link-pad;
        font-size: 1em;
        font-weight: normal;
        line-height: inherit;
        color: $pagination-link-font-color;
        background: none;
      }

      &:hover a,
      a:focus,
      &:hover button,
      button:focus {
        background: $pagination-link-active-bg;
      }

      @if $use-default-classes {
        &.unavailable {
          @include pagination-unavailable-item();
        }

        &.current {
          @include pagination-current-item();
        }
      }
    }
  }

  li {
    @if $center {
      display: inline-block;
      float: none;
    } @else {
      display: block;
      float: $pagination-li-float;
    }
  }
}

@include exports('pagination') {
  ul.pagination {
    @include pagination;
  }

  .pagination-centered {
    @include pagination-container(true);

    ul.pagination {
      @include pagination(true, false);
    }
  }
}