@use "sass:math";

/// @deprecated Please use `px-to-rem()` instead.
@function rem($value, $factor: 1.0) {
  @if ($value != 0 and $value != auto) {
    @if (unitless($value)) {
      $value: $value * 1px;
    }

    @if (unit($factor) == "%") {
      $factor: math.div($factor, $factor * 0 + 1) * 0.01;
    }

    $value: $factor*math.div($value, 16px) * 1rem;
  }

  @return $value;
}

/// Think in pixels; style with rems.
///
/// Converts pixel units & unitless numbers to rems.
///
/// @param {number} $value - The value to convert. May be a number or a pixel
///   unit
/// @param {number} [$factor=1] - The factor to multiply the value with. Most
///   use cases will not set this.
///
/// @return {length} The converted value in rems
@function px-to-rem($value, $factor: 1.0) {
  @if ($value != 0 and $value != auto) {
    @if (unitless($value)) {
      $value: $value * 1px;
    }

    @if (unit($factor) == "%") {
      $factor: math.div($factor, $factor * 0 + 1) * 0.01;
    }

    $value: $factor*math.div($value, 16px) * 1rem;
  }

  @return $value;
}

@mixin background-clip($args) {
  -webkit-background-clip: $args;
  -moz-background-clip: $args;
  background-clip: $args;
}

@mixin touch-action($args) {
  -ms-touch-action: $args;
  touch-action: $args;
}

@mixin user-select($args) {
  -webkit-user-select: $args;
  -moz-user-select: $args;
  -ms-user-select: $args;
  user-select: $args;
}

@mixin border-radius($args) {
  -moz-border-radius:$args;
  -webkit-border-radius:$args;
  border-radius: $args;
}

@mixin border-radius-top($args) {
  -moz-border-radius-topleft:$args;
  -moz-border-radius-topright:$args;

  -webkit-border-radius-topleft:$args;
  -webkit-border-radius-topright:$args;

  border-top-right-radius: $args;
  border-top-left-radius: $args;
}

@mixin border-radius-right($args) {
  -moz-border-radius-bottomright:$args;
  -moz-border-radius-topright:$args;

  -webkit-border-radius-bottomright:$args;
  -webkit-border-radius-topright:$args;

  border-top-right-radius: $args;
  border-bottom-right-radius: $args;
}

@mixin border-radius-left($args) {
  -moz-border-radius-bottomleft:$args;
  -moz-border-radius-topleft:$args;

  -webkit-border-radius-bottomleft:$args;
  -webkit-border-radius-topleft:$args;

  border-top-left-radius: $args;
  border-bottom-left-radius: $args;
}

@mixin border-radius-bottom($args) {
  -moz-border-radius-bottomleft:$args;
  -moz-border-radius-bottomright:$args;

  -webkit-border-radius-bottomleft:$args;
  -webkit-border-radius-bottomright:$args;

  border-bottom-right-radius: $args;
  border-bottom-left-radius: $args;
}

@mixin border-radius-bottom-left($args) {
  -moz-border-radius-bottomleft:$args;
  -webkit-border-radius-bottomleft:$args;
  border-bottom-left-radius: $args;
}

@mixin box-shadow($args) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

@mixin box-sizing($args) {
  -webkit-box-sizing: $args;
  -moz-box-sizing: $args;
  box-sizing: $args;
}

@mixin pointer-none() {
  -moz-pointer-events:none;
  -webkit-pointer-events:none;
  -ms-pointer-events:none;
  pointer-events:none;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  transition: $args;
}

@mixin transform($args) {
  -webkit-transform: $args;
  -moz-transform: $args;
  -ms-transform: $args;
  transform: $args;
}

// FLEXIBLE BOX LAYOUT: OLD SYNTAX

@mixin box-orient($args) {
  -webkit-box-orient: $args;
  -moz-box-orient: $args;
  box-orient: $args;
}

@mixin box-align($args) {
  -webkit-box-align: $args;
  -moz-box-align: $args;
  box-align: $args;
}

@mixin box-flex($args) {
  -webkit-box-flex: $args;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: $args;         /* OLD - Firefox 19- */
  box-flex: $args;
}

@mixin box-direction($args) {
  -webkit-box-direction: $args;
  -moz-box-direction: $args;
}

@mixin box-pack($args) {
  -webkit-box-pack: $args;
  -moz-box-pack: $args;
  box-pack: $args;
}

@mixin box-flex-group($args) {
  -webkit-box-flex-group: $args;
  -moz-box-flex-group: $args;
  box-flex-group: $args;
}

// Mixin for position sticky feature.
@mixin sticky($args) {
  // Default to 'static' if sticky is not supported.
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: $args;
}

// FLEXIBLE BOX LAYOUT: SYNTAX 08 2012

@mixin flex($args) {
  -webkit-flex: $args $args auto;   /* Chrome */
  -ms-flex: $args $args auto;       /* IE 10 */
  flex: $args $args auto;           /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


@mixin flex-align-items($args) {
  -ms-flex-align: $args;            /* IE 10 */
  -ms-align-items: $args;           /* IE 10+ */
  -webkit-align-items: $args;       /* Chrome */
  align-items: $args;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@mixin flex-direction($args) {
  -ms-flex-direction: $args;        /* IE 10 */
  -webkit-flex-direction: $args;    /* Chrome */
  flex-direction: $args;            /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


@mixin flex-justify-content($args) {
  -ms-justify-content: $args;       /* IE 10+ */
  @if (str-slice($args, 1, 4) == flex) { /* IE 10 */
    -ms-flex-pack: str-slice($args, 6);
  } @else {
    -ms-flex-pack: $args;
  }
  -webkit-justify-content: $args;   /* Chrome */
  justify-content: $args;           /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


@mixin flex-shrink($args) {
  -webkit-flex-shrink: $args;       /* Chrome */
  -ms-flex-negative: $args;         /* IE 10 */
  flex-shrink: $args;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
}