@use 'sass:math';

@mixin cbp($m) {
  @container (min-width: #{map-get($breakpoints, $m)}) {
    @content;
  }
}

@mixin bp($m) {
  @media (min-width: map-get($breakpoints, $m)) {
    @content;
  }
}

@mixin hover() {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin fill() {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@mixin srOnly() {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

@mixin srOnlyFocusable() {
  @include srOnly();

  &:focus,
  &:active {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
  }
}

@mixin imgPad($u: null, $v: null) {
  position: relative;
  overflow: hidden;

  >iframe,
  >picture,
  >picture>img,
  >img,
  >svg {
    @include fill();
    object-fit: cover;
    object-position: center;
  }

  &:after {
    content: '';
    display: block;
    height: 0;

    @if $u and $v {
      padding-bottom: math.percentage(math.div($v, $u));
    }
  }
}

@function clampValue($min, $max, $low: 375, $hi: 1920) {
  @return clamp($min * 1px,
    calc($min * 1px + (var(--u, 1vw) * 100 - #{$low * 1px}) / #{$hi - $low} * ($max - $min)),
    $max * 1px);
}

@function clampUnit($min, $max, $scale: 1, $low: 375, $hi: 1920) {
  @return clamp(calc($min * 1px * var(--s, 1)),
    calc($min * 1px * var(--s, 1) + (var(--u, 1vw) * 100 - #{$low * 1px}) / #{$hi - $low} * calc(($max - $min) * var(--s, 1))),
    calc($max * 1px * var(--s, 1)));
}

@function u($value: 1) {
  @return calc(var(--u, 1vw) * #{$value});
}

@function rem($value: 1) {
  @return calc(var(--rem, 1rem) * #{$value});
}