// 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 {
    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;
	margin: 0;
	line-height: normal;
	box-shadow: none;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap;
	transition: .18s background-color ease,
	            .18s color ease,
	            .18s border-color ease;
	user-select: none;
	width: auto;
	height: auto;
}

@mixin button {
	@include button-reset;
	text-transform: none;
	color: $button-text-color;
	background-color: $button-bg-color;
	border: 0;
	font-family: inherit;
	border-radius: $border-radius-base;
	font-weight: 600;

	&.disabled,
	&:disabled {
		cursor: not-allowed;
		opacity: .65;
	}

	&:hover {
		text-decoration: none;
		color: $button-text-color;
		background-color: darken($button-bg-color, 5%);
	}

	&:focus {
		outline: 0;
		box-shadow: 0 0 10px rgba($accent-color, .7);
	}
}

@mixin button-transparent {
	background-color: transparent;
	border: 1px solid $button-bg-color;
	color: $button-bg-color;

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

@mixin button-sm {
	padding: 9px 22px;
	font-size: 14px;
}

@mixin button-md {
	padding: 13px 28px;
	font-size: 16px;
}

@mixin button-lg {
	padding: 18px 38px;
	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 }
}

// Loading spinner
@keyframes rot {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

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

@mixin slide-nav-arrow {
	@include button-reset;
	border: 1px solid $border-color;
	border-radius: $border-radius-base;
	color: $text-color;
	width: 46px;
	height: 46px;
	font-size: 14px;
	padding: 0;
	text-align: center;
	line-height: normal;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;

	&:hover {
		background-color: $button-bg-color;
		color: $button-text-color;
		border-color: transparent;
	}

	@include media-breakpoint-down(sm) {
		width: 38px;
		height: 38px;
	}

	&.slick-disabled {
		opacity: .3;
		cursor: not-allowed;
	}
}

// WooCommerce Price Handles

@mixin wc-price-thumb-focus {
	background-position-y: 0;
	filter: none;
}

@mixin wc-price-thumb {
	background-color: transparent;
	background-position: 0 0;
	width: 26px;
	height: 21px;
	border: 0;
	padding: 0;
	margin: 0;
	vertical-align: top;
	cursor: pointer;
	z-index: 20;
	pointer-events: auto;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='52' height='42'%3E%3Cdefs%3E%3Cpath id='a' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath id='b' d='M23.3176 7.9423l-8.4163-6.1432C13.1953.5706 11.2618-.0997 9.2146.0121h-.1137C4.2103.347.1159 4.368.0022 9.2827-.1115 14.644 4.2102 19 9.6696 19h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%23000' d='M24.3176 8.9423l-8.4163-6.1432c-1.706-1.2285-3.6395-1.8988-5.6867-1.787h-.1137c-4.8906.335-8.985 4.356-9.0987 9.2706C.8885 15.644 5.2102 20 10.6696 20h.1137c1.8197 0 3.6395-.6702 5.118-1.787l8.4163-6.255c.9099-.8935.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M9 6v9m3-9v9'/%3E%3Cg fill-rule='nonzero' transform='translate(1 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23a'/%3E%3Cuse stroke='%23000' xlink:href='%23a'/%3E%3C/g%3E%3Cpath stroke='%23000' d='M9 27v9m3-9v9'/%3E%3Cg%3E%3Cpath fill='%23FFF' fill-rule='nonzero' stroke='%23000' d='M27.6824 8.9423l8.4163-6.1432c1.706-1.2285 3.6395-1.8988 5.6867-1.787h.1137c4.8906.335 8.985 4.356 9.0987 9.2706C51.1115 15.644 46.7898 20 41.3304 20h-.1137c-1.8197 0-3.6395-.6702-5.118-1.787l-8.4163-6.255c-.9099-.8935-.9099-2.2338 0-3.0157z'/%3E%3Cpath stroke='%23B8B8B8' d='M43 6v9m-3-9v9'/%3E%3C/g%3E%3Cg%3E%3Cg fill-rule='nonzero' transform='matrix(-1 0 0 1 51 22)'%3E%3Cuse fill='%23F8F3F7' stroke='%23FFF' stroke-opacity='.75' stroke-width='3' xlink:href='%23b'/%3E%3Cuse stroke='%23000' xlink:href='%23b'/%3E%3C/g%3E%3Cpath stroke='%23000' d='M43 27v9m-3-9v9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	transition: transform .2s ease-in-out;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	&:hover {
		@include wc-price-thumb-focus;
		transform: scale(1.1);
	}
}
