@use 'sass:math';

@use 'variables' as *;
@use 'include-media' as *;

// Use with @include to make reponsive modules
@mixin wrap {
	width: 100%;
	max-width: $site-width + 1.5em;
	margin: 0 auto;
	padding-right: .75em;
	padding-left: .75em;
}

// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
@mixin image-replacement {
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

// https://make.wordpress.org/core/2017/10/22/changes-to-the-screen-reader-text-css-class-in-wordpress-4-9/
@mixin visuallyhidden {
	word-wrap: normal !important;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
}

@mixin unstyled-list {
	margin: 0;
	padding: 0;
	overflow: initial;

	li {
		list-style-type: none;
	}
}

@mixin btn {
	display: inline-block;
	appearance: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font-size: 1em;
	line-height: 1.15;
	font-family: inherit;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: all .15s ease-in-out;

	&:hover {}

	&:disabled {
		cursor: not-allowed;
	}
}

@mixin type {
	margin: 0 0 $spacer;
	line-height: 1.5;

	&:last-child {
		margin-bottom: 0;
	}
}

@mixin entry-content {

	ol,
	ul {
		@include type;
		padding-left: 2.5em;
		overflow: hidden;

		ol,
		ul {
			margin-bottom: .5em;
			padding-left: 1.5em;
			font-size: 1em;
		}
	}

	ol {
		> li {
			list-style-type: decimal;
		}
	}

	ul {
		> li {
			list-style-type: disc;
		}
	}

	blockquote {
		margin: 0;

		p {}
	}
}