////
/// @group nav-strip
////
/// A horizontal navigation strip or rail that displays a list of links to
/// different pages or sections of a website. The active link, indicating the 
/// current page or section, is visually emphasized with an underline.

@use "sass:map";

@use "../utils";
@use "../color";
@use "../selector";
@use "../layout";
@use "../typography";

/// Module Settings
/// @type Map
/// @prop {String} activeSelector [.is-active] Selector that portrays active status.
/// @prop {Color} color [null] Type color for the nav-strip.
/// @prop {Color} color-active [null] Type color for the nav-strip when active.
/// @prop {Color} color-hover [null] Type color for the nav-strip when hovered or focused.
/// @prop {CssValue} font-weight [null] Font weight of navstrip.
/// @prop {Dimension} margin-between [2.25em] Margin between nav-strip items.
/// @prop {Boolean} nowrap [true] Disables the word wrap.
/// @prop {Dimension} padding-x [0] Horizontal padding for the nav-strip links.
/// @prop {Dimension} padding-y [0.3em] Vertical padding for the nav-strip links.
/// @prop {Dimension} padding-y-ruled [null] Vertical padding for the nav-strip links when using nav-strip--rule.
/// @prop {Color} underline-color [orange] Underline color when link is active.
/// @prop {Dimension} underline-size [3px] Size of the underline.
/// @prop {Color} underline-color-hover [gray] Color of the underline when hovered or focused.
/// @prop {String} rule-color [rule] Rule color. Uses rule.scss so the value of this options should be a variable from rule.scss.
/// @prop {Dimension} rule-size [3px] Size of the nav-strip rule.
/// @prop {Dimension} rule-offset [-3px] Offset the rule for the navstrip.

$config: (
  "activeSelector" : "&.is-active, &.has-active",
  "color" : null,
  "color-active" : null,
  "color-hover" : null,
  "font-weight" : null,
  "margin-between" : 2.25em,
  "padding-x" : 0,
  "padding-y" : 0.3em,
  "padding-y-ruled" : null,
  "nowrap" : true,
  "rule-color" : "rule-light",
  "rule-offset" : 0,
  "rule-size" : 3px,
  "underline-color" : "selected",
  "underline-color-hover" : "rule",
  "underline-size" : 3px,
) !default;


/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss
///   @include ulu.component-nav-strip-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-nav-strip-get("property");

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

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

@mixin styles {
  $prefix: selector.class("nav-strip");
  #{ $prefix } {
    max-width: 100%; // So ul will overflow
  }
  // Original thought to not limit to direct child
  // auto is for when we don't have control over markup
  // The list descendants will be selected that way but the list is
  // currently selecting any list/list-item
  #{ $prefix }__list,
  #{ $prefix }--auto ul {
    display: flex;
    overflow-x: auto;
    line-height: typography.get("line-height-dense");
    gap: get("margin-between");
    @include layout.remove-scrollbar();
  }
  #{ $prefix }__item,
  #{ $prefix }--auto li {
    // layout flex since items inside may not be the same height
    display: flex;
    align-items: flex-end;
  }
  
  #{ $prefix }__link,
  #{ $prefix }--auto li > a,
  #{ $prefix }--auto li > button {
    display: block;
    color: color.get(get("color"));
    padding: get("padding-y") get("padding-x");
    border-top: get("underline-size") solid transparent;
    border-bottom: get("underline-size") solid transparent;
    font-weight: get("font-weight");
    @if (get("nowrap")) {
      white-space: nowrap;
    }
    &:hover,
    &:focus {
      border-bottom-color: color.get(get("underline-color-hover"));
      color: color.get(get("color-hover"));
    }
    #{ get("activeSelector") } {
      border-bottom-color: color.get(get("underline-color"));
      color: color.get(get("color-active"));
    }
  }
  
  // Modifiers
  #{ $prefix }--right {
    #{ $prefix }__list,
    &#{ $prefix }--auto ul {
      justify-content: flex-end;
    }
  }
  #{ $prefix }--center {
    #{ $prefix }__list,
    &#{ $prefix }--auto ul {
      justify-content: center;
    }
  }
  #{ $prefix }--rule {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: get("rule-size") solid color.get(get("rule-color"));
    }
    #{ $prefix }__link,
    &#{ $prefix }--auto li > a,
    &#{ $prefix }--auto li > button {
      position: relative;
      z-index: 2;
      margin-bottom: get("rule-offset");
      padding-top: get("padding-y-ruled");
      padding-bottom: get("padding-y-ruled");
    }
  }
}