$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

$breakpoints: (
    xs: 0,
    sm: $breakpoint-sm,
    md: $breakpoint-md,
    lg: $breakpoint-lg,
    xl: $breakpoint-xl,
);

@mixin str-truncated($max-width: 82%) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    max-width: $max-width;
}

@mixin str-truncated-line($max-width: 82%, $line-count: 3, $faded: false) {
    display: -webkit-box;
    -webkit-line-clamp: $line-count;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: $max-width;

    @if $faded ==true {
        mask-image: linear-gradient(180deg, #000 30%, transparent);
    }
}

@mixin ym-fluid-font-size($min, $max) {
    @include ym-responsive-property('font-size', $min, $max);
}

@mixin ym-fluid-line-height($min, $max) {
    @include ym-responsive-property('line-height', $min, $max);
}
@mixin ym-responsive-property($property, $min, $max) {
    #{$property}: clamp-between($min, $max);
}

@mixin ym-bg-gradient-blur($direction, $color) {
    background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
}
@mixin ym-media-breakpoint-up($name) {
    $min: map-get($breakpoints, $name);

    @if $min ==null {
        @error "#{$name} is not a valid breakpoint for thi @media query.";
    }

    @if $min !=0 {
        @media (min-width: $min) {
            @content;
        }
    }

    @else {
        @content;
    }
}
@mixin ym-media-breakpoint-down($name) {
    $max: map-get($breakpoints, $name);

    @if ($max ==null or $max ==0) {
        @error "#{$name} is not a valid breakpoint for this @media query.";
    }
    $breakpoint-max-range-precision: 0.02px;

    @media (max-width: ($max - $breakpoint-max-range-precision)) {
        @content;
    }

}

@mixin ym-media-pointer-mobile($is-mobile: true) {
    @if ($is-mobile) {
        @media (pointer: coarse) {
            @content;
        }
    }

    @else {
        @media (pointer: fine) {
            @content;
        }
    }
}