/* FILE: _extend.scss */
//
// Global extenders.
//

// Accessibility.

	%screen_reader_hiding {
		@include screen_reader_hiding();
	}

// Background.

	%shaded_background {
		z-index: 1; // Trick to keep pseudo element below child elements.

		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: currentColor;
			border-radius: inherit;
			opacity: var(--pseudo_background_opacity);
			z-index: -1; // Trick to keep pseudo element below child elements.
		}

	}

// Headings.

	%widget_heading {
		@include widget_title_style();

		margin-bottom: 2rem;
	}

// Loop.

	// Post list columns.

		%posts_list_columns_1 {
			width: calc( #{ percentage( 1 / 1 ) } - var(--posts_list_gap) );
		}

		%posts_list_columns_2 {
			@include media( map_get( $breakpoint, 's' ) ) {
				width: calc( #{ percentage( 1 / 2 ) } - var(--posts_list_gap) );
			}
		}

		%posts_list_columns_3 {
			@include media( map_get( $breakpoint, 's' ) ) {
				width: calc( #{ percentage( 1 / 2 ) } - var(--posts_list_gap) );
			}
			@include media(
				( map_get( $breakpoint, 's' ), 'min-width' ),
				( map_get( $breakpoint, 'm' ), 'max-width' )
			) {
				&:last-child {
					margin-left: auto;
					margin-right: auto;
				}
			}

			@include media( map_get( $breakpoint, 'm' ) ) {
				width: calc( #{ percentage( 1 / 3 ) } - var(--posts_list_gap) );
			}
		}

		%posts_list_columns_4 {
			@include media( map_get( $breakpoint, 's' ) ) {
				width: calc( #{ percentage( 1 / 2 ) } - var(--posts_list_gap) );
			}

			@include media( map_get( $breakpoint, 'l' ) ) {
				width: calc( #{ percentage( 1 / 4 ) } - var(--posts_list_gap) );
			}
		}

		%posts_list_columns_5 {
			@include media( map_get( $breakpoint, 's' ) ) {
				width: calc( #{ percentage( 1 / 2 ) } - var(--posts_list_gap) );
			}
			@include media(
				( map_get( $breakpoint, 's' ), 'min-width' ),
				( map_get( $breakpoint, 'm' ), 'max-width' )
			) {
				&:last-child {
					margin-left: auto;
					margin-right: auto;
				}
			}

			@include media( map_get( $breakpoint, 'm' ) ) {
				width: calc( #{ percentage( 1 / 3 ) } - var(--posts_list_gap) );
			}
			@include media(
				( map_get( $breakpoint, 'm' ), 'min-width' ),
				( map_get( $breakpoint, 'xl' ), 'max-width' )
			) {
				&:nth-last-child(2) {
					margin-#{$left}: auto;
				}
				&:nth-last-child(1) {
					margin-#{$right}: auto;
				}
			}

			@include media( map_get( $breakpoint, 'xl' ) ) {
				width: calc( #{ percentage( 1 / 5 ) } - var(--posts_list_gap) );
			}
		}

		%posts_list_columns_6 {
			@include media( map_get( $breakpoint, 's' ) ) {
				width: calc( #{ percentage( 1 / 2 ) } - var(--posts_list_gap) );
			}

			@include media( map_get( $breakpoint, 'm' ) ) {
				width: calc( #{ percentage( 1 / 3 ) } - var(--posts_list_gap) );
			}

			@include media( map_get( $breakpoint, 'xl' ) ) {
				width: calc( #{ percentage( 1 / 6 ) } - var(--posts_list_gap) );
			}
		}

// Widgets.

	%widget_calendar {
		text-align: inherit;

		caption {
			font-size: .8em;
			font-weight: 700;
			font-style: normal;
			text-transform: uppercase;
			letter-spacing: var(--letter_spacing);
			caption-side: top;
		}

		table {
			margin: 0;
			font-family: inherit;
			text-align: center;
			border-collapse: separate;
			border-width: 0;

			caption {
				color: inherit;
			}

		}

		tr {

			th,
			td {
				width: auto;
				height: 2em;
				padding: 0;
				text-align: center;
				vertical-align: middle;
			}

		}

		thead {

			th {
				font-size: .8em;
				font-weight: 700;
				background: var(--color_content_headings);
				color: var(--color_content_background);
				border-width: 0;
			}

		}

		tbody {

			a {
				display: block;
				width: 100%;
				height: 100%;
				text-decoration: none;
				line-height: 2;
				background: var(--color_button_background);
				color: var(--color_button_text);
				transition: background .3s;

				&:hover,
				&:focus {
					background: var(--color_button_hover_background);
				}

				&:focus {
					outline-color: var(--color_accent);
				}

			}

		}

		tfoot {

			a {
				color: inherit;
			}

		}

		.pad {
			visibility: hidden;
		}

		.wp-calendar-nav {
			margin-top: .5rem;
			font-size: .8em;
			font-weight: 700;
			text-align: inherit;
			text-transform: uppercase;
			letter-spacing: var(--letter_spacing);

			a {
				text-decoration: none;

				&:hover,
				&:focus {
					text-decoration: underline;
				}

			}

		}

	}

	%widget_list_items {
		margin: 0;
		list-style: none;

		ul {
			margin-#{$left}: .5rem;
			margin-top: .25rem;
			margin-bottom: -.25rem;
			list-style: inherit; // This is required in case the parent was set with a class (such as categories block).
		}

		li {
			padding: .25rem 0;

			&::before {
				content: '\2014'; // —
				margin-#{$right}: .25rem;
				speak: none;
			}

		}

		a {
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
			}

		}

		// For WooCommerce:
		.chosen {
			font-weight: 700;
		}

	}

	%widget_list_items_menu {
		font-size: .8rem;
		overflow-x: hidden;

		li {
			position: relative;
			padding-top: .5rem;
			padding-bottom: .5rem;

			&::before {
				display: none;
			}

			&::after {
				content: '';
				position: absolute;
				width: 200%;
				#{$right}: 0;
				top: 0;
				border-bottom: 1px solid;
				border-color: inherit;
			}

		}

		ul {
			margin-top: .5rem;
			margin-bottom: -.5rem;
			overflow-x: visible;
		}

		a {
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: var(--letter_spacing);
			color: var(--color_content_headings);
		}

	}

	// For WooCommerce:
	%widget_list_products {
		margin: 0;
		list-style: none;

		li {
			overflow: hidden;

			&:not(:last-child) {
				padding-bottom: .5em;
				margin-bottom: .5em;
				border-bottom-width: 1px;
				border-bottom-style: dotted;
			}

		}

		a {
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
			}

		}

		img {
			float: $right;
			width: 3em;
			margin-#{$left}: 1em;
		}

		.product-title {
			display: block;
			font-weight: 700;
		}

		ins {
			padding: 0;
			margin: 0;
			text-decoration: none;
		}

	}