// Screen Sizes

@mixin small {
  @media screen and (max-width: $medium-breakpoint - 1px) {
    @content;
  }
}

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

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

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

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

@mixin clearfix {
  &:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

@mixin each-breakpoint ($selector, $replace) {
  @each $name, $min-width, $max-width in $breakpoints {
    @if $name {
      $selector-name: str-replace($selector, $replace, $name);

      @if ($min-width not null) and ($max-width == null) {
        @media screen and (min-width: $min-width) {
          #{$selector-name} {
            @content;
          }
        }
      } @else if ($min-width == null) and ($max-width not null) {
        @media screen and (max-width: $max-width) {
          #{$selector-name} {
            @content;
          }
        }
      } @else if ($min-width not null) and ($max-width not null) {
        @media screen and (min-width: $min-width) and (max-width: $max-width) {
          #{$selector-name} {
            @content;
          }
        }
      }
    }
  }
}

@mixin c-each-breakpoint ($selector, $replace) {
  // Custom Breakpoint Only
  @each $name, $min-width, $max-width in $custom-breakpoints {
    @if $name {
      $selector-name: str-replace($selector, $replace, $name);

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