@import "settings";
@import "foundation-sites/scss/components/pagination";
@import "separators";
@import "icons";
@import "utils";

/* --- Bonsai Variables --- */

/// Set to false to not include default Pagination CSS classes
/// @type Bool
$bonsai-include-pagination: $bonsai-include-components !default;

/// Color of pagination item
/// @type Color
$bonsai-pagination-item-color: $bonsai-primary !default;

/// Padding between items
/// @type Number | List
$bonsai-pagination-item-padding: rem-calc(5 10) !default;

/// Color of current pagination item
/// @type Color
$bonsai-pagination-item-color-current: $bonsai-black !default;

/// Color of pagination item when disabled
/// @type Color
$bonsai-pagination-item-color-disabled: $bonsai-black !default;

/// Color of current pagination item background
/// @type Color
$bonsai-pagination-item-background-current: $bonsai-white !default;

/// Size of pagination item border
/// @type Number | List
$bonsai-pagination-item-border-radius: 0 !default;

/// Color of pagination background on hover
/// @type Color
$bonsai-pagination-background-hover: $bonsai-hover-background !default;

/// Color of pagination ellipsis
/// @type Color
$bonsai-pagination-ellipsis-color: $bonsai-primary !default;

/// Size of pagination arrow icon
/// @type Number | List
$bonsai-pagination-arrow-icon-size: $bonsai-small-font-size !default;

/// Padding around the current item in the alpha bar
/// @type Number | List
$bonsai-pagination-alpha-bar-current-padding: rem-calc(5) 0 !default;

/// Display page numbers on mobile, or if false only display next and previous
/// @type Bool
$bonsai-pagination-mobile-items: true !default;

/* --- Foundation Configuration --- */
$pagination-item-color: $bonsai-pagination-item-color;
$pagination-item-padding: $bonsai-pagination-item-padding;
$pagination-item-background-hover: $bonsai-pagination-background-hover;
$pagination-item-background-current: $bonsai-pagination-item-background-current;
$pagination-item-color-current: $bonsai-pagination-item-color-current;
$pagination-item-padding: $bonsai-pagination-item-padding;
$pagination-item-color-disabled: $bonsai-pagination-item-color-disabled;
$pagination-ellipsis-color: $bonsai-pagination-ellipsis-color;
$pagination-mobile-items: $bonsai-pagination-mobile-items;

/* --- Mixins --- */

/// Pagination Container Styling
@mixin bonsai-pagination-container {
  @include pagination-container;

  a {
    border-radius: $bonsai-pagination-item-border-radius;
  }

  &.simple {
    border: none;
  }

  &.alpha-bar {
    li {
      &.current {
        padding: $bonsai-pagination-alpha-bar-current-padding;
      }

      &:not(.current) a:hover {
        @include indicator-bar(bottom, $bonsai-hover);
      }

      span {
        padding: $bonsai-pagination-item-padding;
      }
    }
  }
}

/// Pagination Current Item Styling
@mixin bonsai-pagination-item-current {
  @include pagination-item-current;
  @include indicator-bar(bottom);

  font-weight: bold;
  border-radius: 0;
}

/// Pagination Navigation Styling
///
/// @param {Number} $icon-position [$icon-position] - Icon Position
/// @param {String} $icon-direction [$icon-direction] - Icon Direction, ltr|rtl|initial|inherit
///
@mixin bonsai-pagination-navigation($icon-position, $icon-direction) {
  a {
    &:hover,
    &:focus,
    &:active {
      background: none;
      color: $bonsai-link-hover;
    }
  }

  a {
    &::#{$icon-position} {
      @include css-triangle($size: $bonsai-pagination-arrow-icon-size, $color: map_get($bonsai_palette, primary), $direction: #{$icon-direction});
    }
  }

  &.disabled {
    &::#{$icon-position} {
      @include css-triangle($size: $bonsai-pagination-arrow-icon-size, $color: map_get($bonsai_palette, disabled-text), $direction: #{$icon-direction});
    }
  }
}

/// Pagination Default Class Patterns
///
/// This will generate all default CSS classes when $bonsai-include-pagination is true
@mixin pagination {
  @if $bonsai-include-pagination {
    @include foundation-pagination;

    .pagination {
      @include bonsai-pagination-container;

      .current {
        @include bonsai-pagination-item-current;
      }

      .pagination-previous {
        @include bonsai-pagination-navigation(before, left);
      }

      .pagination-next {
        @include bonsai-pagination-navigation(after, right);
      }
    }
  }
}