// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

// CSS image replacement (text hide)
@mixin text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

// Text truncate
// Requires inline-block or block for proper styling
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Button Mixins
@mixin button-reset {
	display: inline-block;
	font-weight: normal;
	margin: 0;
	line-height: normal;
	border: 0;
	box-shadow: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	transition: .18s background-color ease,
	            .18s color ease,
	            .18s border-color ease;
	user-select: none;
	border-radius: 3px;
	width: auto;
	height: auto;
	background: none;
	white-space: normal;
}

@mixin button {
	@include button-reset;
	letter-spacing: $letter-spacing-default;

	&:hover {
		text-decoration: none;
	}

	&:focus {
		outline: 0;
		box-shadow: none;
	}
}

@mixin button-disabled {
	cursor: not-allowed;
	opacity: .65;
}

@mixin button-default {
	color: $white;
	background-color: $accent-color;
	border: 2px solid $accent-color;

	&:hover {
		color: $white;
		background-color: $accent-color-alt;
		border: 2px solid $accent-color-alt
	}
}

@mixin button-white {
	background-color: transparent;
	border: 2px solid $white;
	color: $white;

	&:hover {
		color: $text-color;
		border-color: $white;
		background-color: $white;
	}
}

@mixin button-alt {
	background-color: $accent-color-alt;
	border: 2px solid $accent-color-alt;
	color: $white;

	&:hover {
		background-color: $accent-color;
		border-color: $accent-color;
	}
}

@mixin button-xs {
	padding: 6px 10px;
	font-size: 12px;
}

@mixin button-sm {
	padding: 8px 24px;
	font-size: 14px;
}

@mixin button-md {
	padding: 20px 44px;
	font-size: 14px;
}

@mixin button-lg {
	padding: 17px 40px;
	font-size: 16px;
}

// FontAwesome
// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
@mixin font-awesome($char, $type: solid) {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	content: unquote("\"#{$char}\"");

	@if ($type == solid) {
		font-family: $font-awesome;
		font-weight: 900;
	} @else if ($type == brands) {
		font-family: $font-awesome-brands;
		font-weight: 400;
	} @else if ($type == regular) {
		font-family: $font-awesome;
		font-weight: 400;
	}
}

// Placeholders
@mixin placeholder {
	::-webkit-input-placeholder { @content }
	:-moz-placeholder { @content }
	::-moz-placeholder { @content }
	:-ms-input-placeholder { @content }
}

@mixin placeholder-at {
	&::-webkit-input-placeholder { @content }
	&:-moz-placeholder { @content }
	&::-moz-placeholder { @content }
	&:-ms-input-placeholder { @content }
}

@mixin spinner($color: $white, $opacity: .35, $size: 40px) {
	border: 6px solid rgba($color, $opacity);
	border-top-color: rgba($color, $opacity * 2.5);
	border-radius: 100%;
	height: $size;
	width: $size;
	animation: rot .8s infinite linear;
}