// Screen Sizes
$screen-xlarge:  1910px;
$screen-large:  1366px;
$screen-medium: 801px;
$screen-small:  551px;

@mixin breakpoint($size) {
    @if $size == 'small' {
        @media (min-width: $screen-small) {
            @content ;
        }
    }
    @if $size == 'medium' {
        @media (min-width: $screen-medium) {
            @content ;
        }
    }
    @if $size == 'large' {
        @media (min-width: $screen-large) {
            @content ;
        }
    }
    @if $size == 'xl' {
        @media (min-width: $screen-xlarge) {
            @content ;
        }
    }
}
// Responsiveness
@mixin from($device) {
    @media screen and (min-width: $device) {
        @content;
    }
}

@mixin until($device) {
    @media screen and (max-width: $device - 1px) {
        @content;
    }
}

@mixin mobile() {
    @media screen and (max-width: $tablet - 1px) {
        @content;
    }
}

@mixin tablet() {
    @media screen and (min-width: $tablet), print {
        @content;
    }
}

@mixin tablet-only() {
    @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
        @content;
    }
}

@mixin touch() {
    @media screen and (max-width: $desktop - 1px) {
        @content;
    }
}

@mixin desktop() {
    @media screen and (min-width: $desktop) {
        @content;
    }
}

@mixin desktop-only() {
    @if $widescreen-enabled {
        @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
            @content;
        }
    }
}

@mixin until-widescreen() {
    @if $widescreen-enabled {
        @media screen and (max-width: $widescreen - 1px) {
            @content;
        }
    }
}

@mixin widescreen() {
    @if $widescreen-enabled {
        @media screen and (min-width: $widescreen) {
            @content;
        }
    }
}

@mixin widescreen-only() {
    @if $widescreen-enabled and $fullhd-enabled {
        @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
            @content;
        }
    }
}

@mixin until-fullhd() {
    @if $fullhd-enabled {
        @media screen and (max-width: $fullhd - 1px) {
            @content;
        }
    }
}

@mixin fullhd() {
    @if $fullhd-enabled {
        @media screen and (min-width: $fullhd) {
            @content;
        }
    }
}

@mixin block() {
  &:not(:last-child) {
    margin-bottom: 1.5rem;
    }
}

%block {
    @include block;
}

@mixin overlay($offset: 0) {
    bottom: $offset;
    left: $offset;
    position: absolute;
    right: $offset;
    top: $offset;
}

%overlay {
    @include overlay();
}

@mixin overflow-touch() {
    -webkit-overflow-scrolling: touch;
}
@mixin hamburger($dimensions) {
    cursor: pointer;
    display: block;
    height: $dimensions;
    position: relative;
    width: $dimensions;
    span {
        background-color: currentColor;
        display: block;
        height: 1px;
        left: calc(50% - 8px);
        position: absolute;
        transform-origin: center;
        transition-duration: $speed;
        transition-property: background-color, opacity, transform;
        transition-timing-function: $easing;
        width: 16px;
        &:nth-child(1) {
            top: calc(50% - 6px);
        }
        &:nth-child(2) {
            top: calc(50% - 1px);
        }
        &:nth-child(3) {
            top: calc(50% + 4px);
        }
    }
    &:hover {
        background-color: rgba(black, 0.05);
    }
    // Modifers
    &.is-active {
        span {
            &:nth-child(1) {
                transform: translateY(5px) rotate(45deg);
            }
            &:nth-child(2) {
                opacity: 0;
            }
            &:nth-child(3) {
                transform: translateY(-5px) rotate(-45deg);
            }
        }
    }
}

@mixin arrow($color: transparent) {
    border: 2px solid $color;
    border-radius: 2px;
    border-right: 0;
    border-top: 0;
    content: " ";
    display: block;
    height: 0.625em;
    margin-top: -0.5em;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: center;
    width: 0.625em;
}

%arrow {
    @include arrow();
}

@mixin center($width, $height: 0) {
  position: absolute;
  @if $height != 0 {
    left: calc(50% - (#{$width} / 2));
    top: calc(50% - (#{$height} / 2));
  }
  @else {
    left: calc(50% - (#{$width} / 2));
    top: calc(50% - (#{$width} / 2));
  }
}

@mixin unselectable() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

%unselectable {
  @include unselectable();
}

@mixin loader() {
  animation: spinAround 500ms infinite linear;
  border: 2px solid $grey-lighter;
  border-radius: $radius-rounded;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
}

%loader {
  @include loader();
}

@mixin shine() {
    position: relative;
    animation-name: shine;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}
%shine {
    @include shine();
}

@mixin placeholder {
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input';
  @each $placeholder in $placeholders {
    &:#{$placeholder}-placeholder {
      @content;
    }
  }
}