////
/// @group pager
////


@use "sass:map";

@use "../utils";
@use "../color";

// Markup Matches Drupal Pager

// todo [joe-check] for config options, active comes before (active-color) in this module while other modules have it come afer(color-active) Line 30

/// Module Settings
/// @type Map
/// @prop {String} background-color [link] The background color of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {String} background-color-hover [link-hover] The background color of the pager when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {String} border-color [link] The border color of the pager item. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {String} border-color-hover [link-hover] The border color of the pager item when hovered or focused. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {Dimension} border-radius [50%] The border radius of the pager item.
/// @prop {Dimension} border-width [1px] The border width of the pager item.
/// @prop {Color} color [white] The type color of the pager item.
/// @prop {Color} color-hover [white] The type color of the pager item when covered and focused.
/// @prop {CssValue} font-weight [bold] Font-weight of the pager.
/// @prop {Dimension} item-margin [0.17rem] The item margin.
/// @prop {Dimension} margin-bottom [2rem] The bottom margin of the pager.
/// @prop {Dimension} margin-top [1rem] The top margin of the pager.
/// @prop {Dimension} width [2.5rem] The width of the pager items.
/// @prop {Color} active-background-color [#ccc] The background color of the pager when active.
/// @prop {Color} active-border-color [#ccc] The border color of the pager when active.
/// @prop {Color} active-color [type] The type color when active. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {CssValue} active-font-weight [bold] The font weight of the pager when focused or hovered.
/// @prop {String} action-background-color [link] The background color of the actions options of the pager. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {String} action-background-color-hover [link-hover] The background color of the actions options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {Color} action-border-color [transparent] The border color of the action options of the pager.
/// @prop {String} action-border-color-hover [link] The border color of the action options of the pager when focused or hovered. This uses color.scss, so the value of this options should be a color variable from color.scss.
/// @prop {Color} action-color [white] The type color of the actions options of the pager.
/// @prop {Color} action-color-hover [white] The type color of the actions options of the pager when focused or hovered.
/// @prop {Dimension} action-margin [0.8rem] The margin of the action options of the pager.
/// @prop {Dimension} action-width [2.5rem] The width of the action options of the pager.

$config: (
  "background-color":              "link",
  "background-color-hover":        "link-hover",
  "border-color":                  "link",
  "border-color-hover":            "link-hover",
  "border-radius":                 50%,
  "border-width":                  1px,
  "color":                         white,
  "color-hover":                   white,
  "font-weight":                   bold,
  "item-margin":                   0.17rem,
  "margin-bottom":                 2rem,
  "margin-top":                    1rem,
  "width":                         2.5rem,

  "active-background-color":       #ccc,
  "active-border-color":           #ccc,
  "active-color":                  "type",
  "active-font-weight":            bold,
  
  "action-background-color":       "link",
  "action-background-color-hover": "link-hover",
  "action-border-color":           transparent,
  "action-border-color-hover":     "link",
  "action-color":                  white,
  "action-color-hover":            white,
  "action-margin":                 0.8rem,
  "action-width":                  2.5rem,
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-pager-set(( "property" : value ));

@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

/// Get a config option
/// @param {Map} $name Name of property
/// @example scss
///   @include ulu.component-pager-get("property");


@function get($name) {
  @return utils.require-map-get($config, $name, "card [config]");
}

/// Prints component styles
/// @example scss
///  @include ulu.component-pager-styles();

@mixin styles {
  .pager {
    font-weight: get("font-weight");
    margin-top: get("margin-top");
    margin-bottom: get("margin-bottom");
  }
  .pager__items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .pager__item {
    margin: get("item-margin");
    a {
      
      display: block;
      text-align: center;
      width: get("width");
      height: get("width");
      line-height: get("width");
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: get("border-radius");
      border: get("border-width") solid color.get(get("border-color"));
      background-color: color.get(get("background-color"));
      color: color.get(get("color"));
      &:hover {
        color: color.get(get("color-hover"));
        border-color: color.get(get("border-color-hover"));
        background-color: color.get(get("background-color-hover"));
      }
    }
    &.is-active,
    &--current {
      a, 
      a:hover,
      span {
        font-weight: get("font-weight");
        color: color.get(get("active-color"));
        background-color: color.get(get("active-background-color"));
        border-color: color.get(get("active-border-color"));
      }
    }
  }
  .pager__item--first,
  .pager__item--previous,
  .pager__item--next,
  .pager__item--last {
    a {
      width: get("action-width");
      height: get("action-width");
      line-height: get("action-width");
      background-color: color.get(get("action-background-color"));
      color: color.get(get("action-color"));
      font-size: 1.2rem;
      line-height: 2.8rem;
      font-weight: bold;
      &:hover {
        border-color: color.get(get("action-border-color-hover"));
        background-color: color.get(get("action-background-color-hover"));
        color: color.get(get("action-color-hover"));
      }
    }
  }
  .pager__item--previous {
    margin-right: get("action-margin")
  }
  .pager__item--next {
    margin-left: get("action-margin")
  }
}