////
/// @group elements
/// Outputs general HTML element styles (body, a, etc)
////

@use "sass:map";

@use "../utils";
@use "../color";
@use "../element";
@use "../typography";
@use "../breakpoint";
@use "../button";


/// Module Settings
/// @type Map
/// @prop {CssValue} details-animation [(UluFadeInDown 350ms ease-in-out)] Animation for the details element when toggled.
/// @prop {Boolean} link [true] Enables link styling.
/// @prop {Boolean} link-hover [true] Enables link hover and focus styling.
/// @prop {Boolean} link-visited [true] Enables visited link styling.

$config: (
  "details-animation" : (UluFadeInDown 350ms ease-in-out),
  "link" : true,
  "link-hover" : true,
  "link-visited" : false,
) !default;

/// Change modules $config
/// @param {Map} $changes Map of changes
/// @example scss - General example
///   @include ulu.base-elements-set(( "property" : value ));
@mixin set($changes) {
  $config: map.merge($config, $changes) !global;
}

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

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

/// Output the elements base styles
/// @name base-elements-styles
/// @example scss
///  @include ulu.base-elements-styles();

@mixin styles {

  @include utils.file-header('base', 'elements');
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  body {
    @include styles-body();
    @include breakpoint.embed-for-scripts();
  }
  h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6, 
  ul, 
  ol, 
  li,
  pre, 
  code,
  p { 
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    border-width: 0;
    border-style: solid;
    font-weight: inherit;
  }
  p {
    $margin-top: typography.get("margin-top");
    margin-top: if($margin-top, $margin-top, 0);
    margin-bottom: typography.get("margin-bottom"); 
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  small { 
    @include typography.size("small", ("line-height" : typography.get("line-height-dense"))); 
  }
  sub { 
    bottom: -0.25em; 
  }
  sup { 
    top: -0.5em; 
  }
  b, 
  strong { 
    font-weight: bold; 
  }
  form {
    width: 100%;
  }
  video {
    display: block;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: typography.get("font-family-monospace");
  }
  hr {
    height: 0;
    border: 0;
    box-sizing: content-box;
    overflow: visible;
    margin: element.get("margin") 0;
    border-bottom: element.get-rule-style();
  }
  iframe {
    border: 0;
    outline: 0;
  }
  figure {
    margin: 0;
  }
  img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    border-style: none;
  }
  // Not styling ordered lists because they are used in navigation and other UI components
  // - Would rather explicitly style numbered lists so menus and things 
  //   don't have to reset. Usually there's only a few type of in content 
  //   numbered lists and those are styled via classes or wysiwyg
  ul,
  ol { 
    list-style: none; 
  }
  a {
    // User can disable link styling if they want to add more specific styling
    // and omit this in element base
    @if (get("link")) {
      @include element.link-defaults(
        $hover: get("link-hover"),
        $visited: get("link-visited"),
      );
    }
  }
  [disabled],
  :disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  button[disabled] {
    pointer-events: none;
  }
  dt { 
    font-weight: bold;
  }
  [hidden], 
  template {
    display: none;
  }
  blockquote {
    margin: 0;
  }
  @if get("details-animation") {
    details {
      &[open] {
        summary {
          ~ * {
            // Prevent issues with opening these programmatically on firefox
            // - Animation would not be complete in the clone on firefox (looks empty)
            @media screen {
              animation: get("details-animation");
            }
          }
        }
      }
    }
  }
  audio {
    display: block;
    margin: 1rem 0;
  }
}

@mixin styles-body() {
  color: color.get('type');
  background-color: color.get("background");
  font-family: typography.get("font-family");
  // Note we are using relative units here instead of setting a 
  // pixel base like we use to on the HTML
  // This will allow the user preference in font size
  // Useful for accessibility
  @include typography.size("base");
}