////
/// @group scroll-slider
/// Overflow scrolling slider component (use with ui/overflow-scroller.js)
////

@use "sass:map";

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

/// Module Settings
/// @type Map
/// @prop {Color} background-color  [false]
/// @prop {String} container  ["container"]
/// @prop {List} containers  [("container",)]
/// @prop {Dimension} margin-bottom  [3rem]
/// @prop {Dimension} margin-top  [1rem]
/// @prop {Dimension} padding-bottom  [0]
/// @prop {Dimension} padding-top  [0]
/// @prop {String} prefix ["scroll-slide"]
/// @prop {CssValue} button-border  [2px solid white]
/// @prop {Color} button-border-color-hover  [white]
/// @prop {Dimension} button-border-radius  [50%]
/// @prop {CssValue} button-box-shadow  [element.get("box-shadow")]
/// @prop {Color} button-color  [color.get("type")]
/// @prop {Color} button-color-hover  [color.get("link")]
/// @prop {Dimension} button-font-size  [1.35rem]
/// @prop {Dimension} button-indent  [1.5rem]
/// @prop {Dimension} button-indent-small  [0.5rem]
/// @prop {Dimension} button-size  [3rem]
/// @prop {Dimension} button-icon-offset-x  [false]
/// @prop {Dimension} button-icon-offset-y  [false]

$config: (
  "background-color" : false,
  "container" : "container",
  "containers" : ("container",),
  "margin-bottom" : 3rem,
  "margin-top" : 1rem,
  "padding-bottom" : 0,
  "padding-top" : 0,
  "prefix": "scroll-slider",
  "button-border" : 2px solid white,
  "button-border-color-hover" : white,
  "button-border-radius" : 50%,
  "button-box-shadow" : element.get("box-shadow"),
  "button-color" : color.get("type"),
  "button-color-hover" : color.get("link"),
  "button-font-size" : 1.35rem,
  "button-icon-offset-x" : false,
  "button-icon-offset-y" : false,
  "button-indent" : 1.5rem,
  "button-indent-small" : 0.5rem,
  "button-size" : 3rem,
) !default;

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

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

/// Output component stylesheet
/// @example scss
///  @include ulu.component-scroll-slider-styles();

@mixin styles {
  $prefix: selector.class(get("prefix"));
  
  #{ $prefix } {
    position: relative; // for controls
    background-color: color.get(get("background-color"));
    margin: get("margin-top") 0 get("margin-bottom") 0;
  }
  #{ $prefix }--cards {
    #{ $prefix }__slide {
      margin-right: 1.35rem;
      > .card {
        width: 100%;
        max-width: none;
        height: calc(100% - 2rem);
        margin: 1rem 0 1rem 0;// For shadows
      }
    }
    #{ $prefix }__slide--empty {
      margin-right: 0;
    }
  }
  #{ $prefix }__track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    // scroll-padding-left: calc(((100vw - vars.$site-max-width) / 2) + vars.$site-margin);
    // switch below to a modifier (like #{ $prefix }--in-container, #{ $prefix }--in-container-large-x) Default is container
    
    // scroll-padding-right: 1rem;
    // Hide scrollbars
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    &::-webkit-scrollbar {
      display: none; /* for Chrome, Safari, and Opera */
    }
    @include layout.match-container-margin("scroll-padding-left", get("container"));
    // padding: 1rem;
    // Add space to end of list
    // &::after {
    //   content: "\00a0";
    //   display: block;
    //   width: 1rem;
    //   height: 100%;
    //   flex: 0 0 1rem;
    // }
  }
  #{ $prefix }__slide {
    
    flex: 0 0 450px;
    max-width: 90vw;
    scroll-snap-align: start;

    $containerBreakpoint: layout.get-container("container", $breakpoint: "small", $required: false);
    // Only if this container has this breakpoint
    @if ($containerBreakpoint) {
      @include breakpoint.max("small") {
        $pad: layout.get-container-padding-x("container", "small");
        max-width: none;
        flex-basis: calc(100vw - ($pad * 2) - var(--ulu-scrollbar-width));
      }
    }
  }
  #{ $prefix }__slide--empty {
    scroll-snap-align: none;
    // flex-basis: calc(((100vw - vars.$site-max-width) / 2) + vars.$site-margin);
    @include layout.match-container-margin("flex-basis", get("container"));
    & {
      margin-right: 0;
    }
    // @include ulu.breakpoint-max("small") {
    //   &:last-child {
    //     display: none;
    //   }
    // }
  }
  #{ $prefix }__controls {
    list-style: none !important;
    padding: 0;
  }
  .OverflowScroller__control-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
  @if get("button-icon-offset-y") {
    .OverflowScroller__control-icon {
      margin-top: get("button-icon-offset-y");
    }
  }
  .OverflowScroller__control-button--previous {
    left: get("button-indent");
    @if get("button-icon-offset-x")  {
      .OverflowScroller__control-icon {
        margin-left: get("button-icon-offset-x");
        
      }
    }
  }
  .OverflowScroller__control-button--next {
    right: get("button-indent");
    @if get("button-icon-offset-x")  {
      .OverflowScroller__control-icon {
        margin-right: get("button-icon-offset-x");
      }
    }
  }
  @include breakpoint.max("small") {
    .OverflowScroller__control-button--previous {
      left: get("button-indent-small");
    }
    .OverflowScroller__control-button--next {
      right: get("button-indent-small");
    }
  }
}