////
/// @group skip-link
/// Accessible skip link component (works in combination with .hidden-visually-focusable)
////

@use "sass:meta";

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

// Used for function fallback
$-fallbacks: (
  "border-radius" : (
    "function" : meta.get-function("get", false, "element"),
    "property" : "border-radius"
  ),
  "box-shadow" : (
    "function" : meta.get-function("get", false, "element"),
    "property" : "box-shadow"
  ),
  "z-index" : (
    "function" : meta.get-function("get", false, "layout"),
    "property" : "z-index-fixed"
  ),
);

/// Module Settings
/// @type Map

$config: (
  "padding" : (1em 2em),
  "background-color" : white,
  "box-shadow" : true,
  "border-radius" : true,
  "z-index" : true
) !default;

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

@function get($name) {
  $value: utils.require-map-get($config, $name, "button-verbose [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}

/// Output component stylesheet
/// - Note: This needs to be paired with the display helper class "hidden-visually-focusable"
/// - Note: Remember to add an id to the content you want to skip to. Often this will go to the content after the nav menu.
/// @example scss
///  @include ulu.component-skip-link-styles();
/// @example html
///   <a 
///     class="skip-link hidden-visually-focusable" 
///     href="#main-content"
///   >
///     Skip to main content
///   </a>
///   ...
///   <main id="main-content">...</main>

@mixin styles {
  $prefix: selector.class("skip-link");

  #{ $prefix } {
    display: block;
    position: fixed;
    z-index: get("z-index");
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: get("padding");
    background-color: color.get(get("background-color"));
    font-weight: bold;
    box-shadow: get("box-shadow");
    border-bottom-left-radius: get("border-radius");
    border-bottom-right-radius: get("border-radius");
  }
}