@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';

// Брейкпоинты соответствуют брейкпоинтам vuetify https://v2.vuetifyjs.com/en/features/breakpoints/

$brkpnts: (
  xs: 475px,
  xm: 650px,
  sm: 960px,
  md: 1350px,
  ml: 1500px,
  lg: 1792px,
  xl: 2560px,
);

/**
  Mobile first брейкпоинты
  @include from-br(sm) { ... }
  @include from-br(400px) { ... }
 */
@mixin from-br($bp) {
  @if map.has-key($brkpnts, $bp) {
    $breakpoint-value: map.get($brkpnts, $bp);

    @media (min-width: $breakpoint-value) {
      @content;
    }
  } @else if meta.type-of($bp) == 'number' {
    $pixelyzed: $bp * 1px;

    @media (min-width: $pixelyzed) {
      @content;
    }
  } @else {
    @warn 'Invalid breakpoint: #{$bp}.';
  }
}

/**
  @include to-br(md) { ... }
  @include to-br(400px) { ... }
 */
@mixin to-br($bp) {
  @if map.has-key($brkpnts, $bp) {
    $breakpoint-value: map.get($brkpnts, $bp) - 1px;

    @media (max-width: $breakpoint-value) {
      @content;
    }
  } @else if meta.type-of($bp) == 'number' {
    $pixelyzed: $bp * 1px - 1px;

    @media (max-width: $pixelyzed) {
      @content;
    }
  } @else {
    @warn 'Invalid breakpoint: #{$bp}.';
  }
}

/**
  Container query брейкпоинты
  @include from-cq($width) { ... }
  @include to-cq($width) { ... }
 */
@mixin from-cq($bp) {
  @container (min-width: #{$bp}) {
    @content;
  }
}

@mixin to-cq($bp) {
  @container (max-width: #{$bp - 1px}) {
    @content;
  }
}

/**
  Hover с transition. Условие — наличие наведения у устройства, а не ширина окна: на тач-экране
  hover «залипает» после тапа и его правда не нужно, а вот узкому окну с мышью он нужен.
  @include hover(background-color) { background-color: red; }
  @include hover(background-color, color) { background-color: red; color: white; }
 */
@mixin hover($properties...) {
  @media (hover: hover) {
    $transitions: ();

    @each $prop in $properties {
      $transitions: list.append($transitions, var(--transition) #{$prop}, comma);
    }

    transition: $transitions;

    &:is(:hover, :focus-visible) {
      @content;
    }
  }
}