_mixins.scss

@use "sass:color";
@use "sass:meta";

/// Gets the rgb values of the color.
/// @access private
@function get-rgb($color) {
  $r: color.red($color);
  $g: color.green($color);
  $b: color.blue($color);
  @return $r, $g, $b;
}

/// Sets the element to be a column flex container and adds proper flags to disable the auto min behavior of flexbox.
/// Check this for more about the auto min behavior: https://stackoverflow.com/a/36247448/2172786.
/// Note that you can override this to be a row flex container. We made it column because that's the most common case.
/// @access public
/// @param {Boolean} $flex [true] - Whether or not to add `flex: 1`
@mixin flex-adaptive-container($flex: true) {
  @if ($flex == true) {
    flex: 1;
  }
  display: flex;
  flex-flow: column;
  min-width: 0;
  min-height: 0;
}

/// Pads the content of the scroll. This makes it so the inner content is padded without affecting the placement of the scrollbar.
/// @access public
/// @param {Number} $padding - The padding
@mixin pad-content($padding) {
  > .mr-scroll > .mr-scroll_content {
    padding: $padding;
  }
}

/// Sets a fixed height for the content.
/// @access public
/// @param {Number} $height - The height
@mixin height($height) {
  > .mr-scroll {
    height: $height;
  }
}

/// Sets a max height for the content.
/// @access public
/// @param {Number} $max-height - The max height
@mixin max-height($max-height) {
  > .mr-scroll {
    max-height: $max-height;
  }
}

/// Applies a hidden content fade to the scroll.
/// @access public
/// @param {Color|String|List} $color - The background color (can be a CSS var that points to an rgb value, a color, or an rgb value)
@mixin hidden-content-fade($color: null) {
  @if ($color == null) {
    $color: white;
  }

  $type: meta.type-of($color);
  $color-rgb: null;

  @if ($type == "color") {
    // i.e white, #fff, etc
    $color-rgb: get-rgb($color);
  } @else if ($type == "string") {
    // i.e var(--rgb)
    $color-rgb: $color;
  } @else {
    // i.e a variable poiting to "255, 255, 255" (without quotes)
    $color-rgb: $color;
  }

  > .mr-scroll {
    > .mr-scroll_hidden-content-fade {
      --mr-scroll-hidden-content-fade-gradient-color: #{$color-rgb};
      display: initial;
    }
  }
}

/// Overrides the thumb border radius.
/// @access public
/// @param {Number} $border-radius - The border radius
@mixin override-thumb-border-radius($border-radius) {
  > .mr-scroll > .mr-scroll_bar > .mr-scroll_bar-thumb {
    border-radius: $border-radius;
  }
}

/// Overrides the hidden content fade size.
/// @access public
/// @param {Number} $size - The size
@mixin override-hidden-content-fade-size($size) {
  > .mr-scroll {
    &::after,
    &::before {
      height: $size;
    }
  }
}