@import './fonts';
@import "./functions/_breakpoints.scss";

@mixin hover {
    .has-mouse &:hover {
        @content;
    }
}

@mixin overlay ($opacity: 0.5, $zIndex: 1, $blockOpacity: 1) {
    &::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: $zIndex;
        width: 100%;
        height: 100%;
        content: '';
        opacity: $blockOpacity;
        visibility: hidden;
        transition: opacity 0.4s, visibility 0.4s;
        background-color: rgba(#000, $opacity);
    }
}

@mixin active-shadow {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s ease;

  &:hover {
      box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.25), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }
}

@mixin ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin multi-line-ellipsis($font-size, $line-height, $lines-to-show) {
    display: block; /* Fallback for non-webkit */
    display: -webkit-box;
    height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
    font-size: $font-size;
    line-height: $line-height;
    -webkit-line-clamp: $lines-to-show;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
}

@mixin normal-font () {
  font-family: $font-family;
}

@mixin condensed-font () {
  font-family: $font-family;
  font-stretch: condensed;
}

@mixin monospace-font () {
  font-family: $monospace-font-family;
}

$breakpoints: (
    "sm": 0,
    "md": 768,
    "lg": 1280,
    "xl": 1920
);

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin respUp($name, $landscape: false, $breakpoints: $breakpoints) {
    $min: breakpoint-min($name, $breakpoints);

    @if $min and $landscape {
        @media (min-width: #{$min}px) and (orientation: landscape) {
            @content;
        }
    }

    @else if $min {
        @media (min-width: #{$min}px) {
            @content;
        }
    }

    @else {
        @content;
    }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin respDown($name, $landscape: false, $breakpoints: $breakpoints) {
    $max: breakpoint-max($name, $breakpoints);

    @if $max and $landscape {
        @media (max-width: #{$max}px) and (orientation: landscape) {
            @content;
        }
    }

    @else if $max {
        @media (max-width: #{$max}px) {
            @content;
        }
    }

    @else {
        @content;
    }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin respBetween(
    $lower,
    $upper,
    $landscape: false,
    $breakpoints: $breakpoints
) {
    $min: breakpoint-min($lower, $breakpoints);
    $max: breakpoint-max($upper, $breakpoints);

    @if $min != null and $max != null and $landscape {
        @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
            @content;
        }
    }

    @else if $min != null and $max != null {
        @media (min-width: #{$min}px) and (max-width: #{$max}px) {
            @content;
        }
    }

    @else if $max == null {
        @include respUp($lower, $landscape, $breakpoints) {
            @content;
        }
    }

    @else if $min == null {
        @include respDown($upper, $landscape, $breakpoints) {
            @content;
        }
    }
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin respOnly($name, $landscape: false, $breakpoints: $breakpoints) {
    $min: breakpoint-min($name, $breakpoints);
    $max: breakpoint-max($name, $breakpoints);

    @if $min != null and $max != null and $landscape {
        @media (min-width: #{$min}px) and (max-width: #{$max}px) and (orientation: landscape) {
            @content;
        }
    }

    @else if $min != null and $max != null {
        @media (min-width: #{$min}px) and (max-width: #{$max}px) {
            @content;
        }
    }

    @else if $max == null {
        @include respUp($name, $landscape, $breakpoints) {
            @content;
        }
    }

    @else if $min == null {
        @include respDown($name, $landscape, $breakpoints) {
            @content;
        }
    }
}