////
/// @group table-sticky
/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
////

@use "sass:map";
@use "sass:meta";

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


// Used for function fallback
$-fallbacks: (
  "box-shadow" : (
    "function" : meta.get-function("get", false, "element"),
    "property" : "box-shadow"
  ),
);

/// Module Settings
/// @type Map
/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow

$config: (
  "box-shadow": true,
  "ui-color-disabled": #6490af,
) !default;

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

@function get($name) {
  $value: utils.require-map-get($config, $name, "table-sticky [config]");
  @return utils.function-fallback($name, $value, $-fallbacks);
}
/// Prints component styles
/// @demo table-sticky
/// @example scss
///  @include ulu.component-table-sticky-styles();

@mixin styles {
  $prefix: selector.class("table-sticky");

  #{ $prefix } {
    position: relative; // For controls
    width: 100%;
    * {
      box-sizing: border-box;
    }
  }
  #{ $prefix }__display {
    overflow-x: auto;
    overflow-y: hidden;
    // scroll-behavior: smooth;
  }
  #{ $prefix }__table {
    // border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  #{ $prefix }__sticky-wrap {
    position: sticky;
    top: -1px;
    left: 0;
    width: 100%;
    z-index: 2;
    margin-bottom: 200px; // Distance from bottom of table to disable
    margin-top: -200px; // Distance from bottom of table to disable
  }
  #{ $prefix }__sticky-wrap--first-column-header {
    z-index: 4;
  }
  #{ $prefix }__sticky-wrap--controls {
    margin-top: -52vh;
    margin-bottom: 52vh;
  }
  #{ $prefix }__header-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  #{ $prefix }__table--first-column-header,
  #{ $prefix }__table--first-column {
    position: absolute;
    top: 0;
    left: 0;
    width: auto !important;
  }
  #{ $prefix }__table--first-column {
    z-index: 3;
  }
  #{ $prefix }__table--header {
    will-change: transform;
  }
  #{ $prefix }__hidden-visually {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  // NOTE: The table caption needs to be positioned normally
  // as display table-cell. Making absolute for hidden-visually 
  // is causing chrome to add an anonymous cell to the table resulting in a 1px
  // cell under the header. Which is messing up alignments. The only solution
  // without removing the <caption> (not good for WCAG) is to position it at the 
  // of the table so it doesn't affect the header alignments. Then cropping it to 
  // a pixel and using negative margin to remove it's pixel from the flow beneath 
  #{ $prefix }__caption {
    margin-bottom: -1px;
    height: 1px;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    display: none;
  }
  // Allow initiating scrolling by dragging first column
  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
    #{ $prefix }__table--first-column-header,
    #{ $prefix }__table--first-column {
      // pointer-events: none;
      visibility: hidden;
      // opacity: 0 !important;
    }
  }
  #{ $prefix }__controls {
    position: absolute;
    top: 50vh;
    right: 20px;
  }
  #{ $prefix }__controls-inner {
    display: flex;
  }
  #{ $prefix }__control {
    box-shadow: get("box-shadow");
  }
  #{ $prefix }__sort-button {
    display: flex;
    align-items: center;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
  }
  #{ $prefix }__sort-button--focused {
    outline: 2px auto Highlight;
    outline: 2px auto -webkit-focus-ring-color;
  }
  #{ $prefix }__sort-icon {
    margin-left: auto;
    padding-left: 1em;
    display: block;
    opacity: 0.5;
    .sort-active & {
      opacity: 1;
    }
    .sort-ascending & {
      #{ $prefix }__sort-icon-inner {
        transform: rotate(180deg);
      }
    }
  }
  #{ $prefix }__sort-icon-inner {
    display: block;
  }
}