/* Media query mixins */
/* ------------------------ */

@mixin xsmall-only {
  @media (max-width: #{$bp-small}) {
    @content;
  }
}

@mixin small-only {
  @media (max-width: #{$bp-medium}) {
    @content;
  }
}

@mixin small {
  @media (min-width: #{$bp-small}) {
    @content;
  }
}

@mixin medium {
  @media (min-width: #{$bp-medium}) {
    @content;
  }
}

@mixin large {
  @media (min-width: #{$bp-large}) {
    @content;
  }
}

@mixin xlarge {
  @media (min-width: #{$bp-xlarge}) {
    @content;
  }
}

@mixin site-max-width {
  @media (min-width: #{$bp-site-max-width}) {
    @content;
  }
}

@mixin clearfix {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }
}

// Center vertically
@mixin vertical-center-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

// Center vertically and horizontally
@mixin center-align($position: relative) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin unstyle-lists {
  ul, ol, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

@mixin green-background {
  background-color: $color-green-transparent;
}

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

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