@use 'sass:color';
@use 'sass:string';
@mixin transition($prop: all, $time: $transition_duration, $ease: linear, $delay: 0) {
  transition: $prop $time $ease;
}

@mixin border-radius($topleft: 5px, $topright: 5px, $bottomleft: 5px, $bottomright: 5px) {
  border-radius: $topleft $topright $bottomright $bottomleft;
}

@mixin transform($rotate: 90deg, $scale: 1, $skew: 1deg, $translate: 10px) {
  transform: rotate($rotate) scale($scale) skew($skew) translate($translate);
}
@mixin transform($rotate: 90deg, $scale: 1, $skew: 1deg, $translateX: 0px, $translateY: 0px) {
  transform: rotate($rotate) scale($scale) skew($skew) translateX($translateX)
    translateY($translateY);
}

@mixin transform-rotate($rotate: 90deg, $time: 0.5s, $ease: linear) {
  transition: transform $time $ease;
  transform: rotate($rotate);
}

@mixin middle() {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

@mixin middle-center() {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@mixin translateX($x: 0px) {
  transform: translateX($x);
}

@mixin translateAndScale($x: 0px, $y: 0px, $scale: 0) {
  transform: translateX($x) translateY($y) scale($scale);
}

@mixin translateXAndRotate($x: 0px, $rotate: 0) {
  transform: translateX($x) rotate($rotate);
}

@mixin gradient($startColor: #eee, $endColor: white) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(top, $startColor, 0%, $endColor, 100%);
  background-image: linear-gradient(to bottom, $startColor 0%, $endColor 100%);
}

// @include responsive-ratio(16, 9)
@mixin responsive-ratio($x, $y, $pseudo: false) {
  $padding: string.unquote(($y / $x) * 100 + '%');

  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

@mixin scrollbar($color) {
  &::-webkit-scrollbar-thumb {
    background: $color;
  }
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
}
