@import 'functions';

// Responsive
// ==================
@mixin up($size) {
  $size: strip-unit($size);
  @media (min-width: $size * 1px) {
    @content;
  }
}
@mixin down($size) {
  $size: strip-unit($size);
  @media (max-width: $size * 1px) {
    @content;
  }
}
@mixin between($down, $up) {
  $down: strip-unit($down);
  $up: strip-unit($up);
  @media (min-width: $down * 1px) and (max-width: $up * 1px) {
    @content;
  }
}

// Espacement
// ==================
@mixin container($width, $padding) {
  width: 100%;
  padding-left: $padding;
  padding-right: $padding;

  @include up($width + 2 * $padding) {
    padding-left: calc(50vw - #{$width / 2});
    padding-right: calc(50vw - #{$width / 2});
  } 
}


@mixin no-scroll {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@mixin color-scroll($back, $up) {
  scrollbar-color: $up $back;
  &::-webkit-scrollbar {
    height: 5px;
    
   // background-color: $back;
  }
  &::-webkit-scrollbar-track {
    background-color: $back;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $up;
  }
}