@mixin trustedlogin-auth( $namespace ) {
	.tl-#{$namespace}-auth {

		min-width: $container-width-min;
		max-width: $container-width-max;
		display: block;
		margin: ($gutter-width * 3) auto;
		font-size: 1em;
		text-align: center;
		zoom: 1;

		section {
			background: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
			border-radius: $border-radius-base;
			overflow: hidden;
			padding: 40px 5% $gutter-width;
			border-bottom: 1px solid $color-light-grey-900;

			* {
				text-align: left;
			}
		}

		&.tl-#{$namespace}-grant-access section > div {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}

		.tl-#{$namespace}-auth__details {

			box-sizing: border-box;

			> div {
				margin-bottom: $vertical-spacing;
			}
		}

		.tl-#{$namespace}-auth__ref p {
			text-align: center;
			font-family: Consolas, Monaco, monospace; // WP .code CSS class
		}

		.tl-#{$namespace}-auth__actions {
			margin-bottom: $vertical-spacing;
			padding-top: 0;
			text-align: center;
		}

		.tl-#{$namespace}-auth__tos p {
			text-align: center;
			padding: 0;
			margin: 0;
			margin-top: ( $vertical-spacing / 2 ) * -1;
			margin-bottom: $vertical-spacing;
			color: $color-666;
		}

		.tl-#{$namespace}-auth__checkbox--large {
			transform: scale(1.2);
		}

		.dashicons--small,
		.dashicons--medium {
			height: $small-icon-size;
			width: $small-icon-size;
			font-size: $small-icon-size;
			vertical-align: text-top;
		}

		.dashicons--medium {
			vertical-align: text-bottom;
			line-height: 1.2;
		}

		.dashicons--large {
			font-size: $large-icon-size;
			height: $large-icon-size;
			width: $large-icon-size;
			vertical-align: bottom;
		}

		.dashicons--help {
			color: $color-888;
			cursor: help;
		}

		.tl-#{$namespace}-auth__response {
			text-align: center;
			font-size: 18px;
			line-height: 1.375;
			font-weight: bold;
			transition: padding 1s;

			/** Simulate a stroke */
			text-shadow: -1px -1px 0 $color-light-grey-200,
			1px -1px 0 $color-light-grey-200,
			-1px 1px 0 $color-light-grey-200,
			1px 1px 0 $color-light-grey-200,
			0 0 3px $color-light-grey-200;
		}

		.tl-#{$namespace}-auth__response_pending {
			padding: 140px 40px ($vertical-spacing / 2) 40px; // Related to the size of the progress indicator
			vertical-align: top;
			background: url("#{$path}loading.svg") center top no-repeat;
			background-size: contain;

			@media (prefers-reduced-motion: reduce) {
				& {
					background-image: url("#{$path}lock.svg");
				}
			}
		}

		.tl-#{$namespace}-auth__response_error {
			padding: 20px;
			margin-bottom: $vertical-spacing / 2;
			color: #23282D;
			font-weight: 500;
			vertical-align: top;
			border: 2px solid #f9a87e;
			background-color: #fef1ea;
			border-radius: $border-radius-large;
		}

		.tl-#{$namespace}-toggle {
			cursor: pointer;
		}

		.tl-#{$namespace}-auth__roles {

			.tl-#{$namespace}-toggle .dashicons {
				margin-left: 0;
				vertical-align: middle;
			}

			.tl-#{$namespace}-auth__role-container {
				margin-top: $vertical-spacing/2;
				margin-bottom: 0;
				border-bottom: 1px solid $color-light-grey-500;
				padding: 0 $gutter-width $vertical-spacing/2;

				&.hidden {
					display: none;
				}

				h3 {
					margin-top: $vertical-spacing;
				}
			}

			li {
				color: $color-555;
				margin-bottom: $vertical-spacing / 2;

				.dashicons {
					margin-right: $gutter-width;
					vertical-align: middle;
				}

				.dashicons-yes-alt {
					color: $color-green;
				}

				.dashicons-no {
					color: $color-red;
				}

				.code {
					display: inline-block;
					margin-bottom: .25em;
					font-size: 13px;
				}

				small {
					display: block;
					line-height: 1.375;
					font-size: 14px;
					margin-left: $small-icon-size + $gutter-width;
				}
			}

			&:after {
				content: '';
				display: block;
				clear: both;
			}
		}

		h1, h2, h3, table {
			color: $color-555;
			border: 0;
			clear: none;
			margin: 0 0 $vertical-spacing;
			padding: 0;
		}

		table {
			margin-bottom: $vertical-spacing;
		}

		h1 {
			font-size: 1.8em;
			font-weight: 300;
		}

		h2 {
			font-size: 1.25em;
			line-height: 1.7;
			font-weight: 400;
			margin: 0;

			.dashicons--large {
				padding-right: $gutter-width;
			}

			small {
				display: block;
				color: $color-666;
				font-size: 14px;
				padding-left: $large-icon-size + $gutter-width;
			}

			&.tl-#{$namespace}-auth__intro {
				text-align: center;
				font-size: 2em;
				line-height: 1.375;
				padding: $gutter-width $gutter-width * 3;
			}
		}

		&.tl-#{$namespace}-grant-access .tl-#{$namespace}-auth__roles {
			margin-top: $vertical-spacing / 2;
			padding: ($vertical-spacing / 2) 0 0 0;
		}

		//&.tl-#{$namespace}-grant-access .tl-#{$namespace}-auth__expire, // When the expiration has an expanding section, uncomment this line.
		&.tl-#{$namespace}-has-access .tl-#{$namespace}-auth__content {
			margin-top: $vertical-spacing / 2;
			padding: ($vertical-spacing / 2) $gutter-width;
			border: 1px solid $color-light-grey-600;
			border-radius: $border-radius-base;
		}

		&.tl-#{$namespace}-has-access .tl-#{$namespace}-auth__content {
			padding: 0;
		}

		&.tl-#{$namespace}-has-access .tl-#{$namespace}-auth__header {
			padding: $vertical-spacing ($gutter-width * 2);
			margin-bottom: $vertical-spacing;
			border-radius: $border-radius-small $border-radius-small 0 0;
			background: $color-light-grey-100;
			border-bottom: 1px solid $color-light-grey-600;

			h3 {
				text-transform: none;
				font-size: 1.4em;
			}

			.tl-#{$namespace}-auth__meta {
				color: $color-666;
			}
		}

		.tl-#{$namespace}-auth__intro,
		.tl-#{$namespace}-auth__details {
			padding: ($vertical-spacing / 2) $gutter-width * 2;
		}

		.tl-#{$namespace}-ticket__fields {
			margin-top: ($vertical-spacing / 2);

			textarea {
				padding: ($vertical-spacing / 3) $gutter-width;
				font-size: 17px;
				line-height: 1.375;
			}
		}

		.button-danger {
			border: 1px solid $color-light-grey-900;
			background: #fff;
			color: $color-red;
			padding: ($vertical-spacing / 4) $vertical-spacing;

			&:active,
			&:hover {
				border: 1px solid $color-red;
				background: $color-red;
				color: #fff;
				-webkit-box-shadow: inset 0 2px 5px -3px opacify($color-red, .5);
				box-shadow: inset 0 2px 5px -3px opacify($color-red, .5);
				text-shadow: none !important
			}
		}

		h3 {
			font-size: 1em;
			text-transform: uppercase;
			margin-bottom: $vertical-spacing / 2;
			font-weight: 600;
		}

		p, ul {
			color: $color-555;
			font-size: 1.1em;
			line-height: 1.7;
			margin: 0 0 $vertical-spacing / 2;
		}

		input.code {
			border: none;
			padding: 0;
			font-size: 11.5px;
			width: 100%;
			min-height: $large-icon-size; // copy button height
			background: transparent;
			margin: 0; // Override WP login screen issues
		}

		.tl-#{$namespace}-auth__secured_by {
			text-align: center;
			font-size: 1.1em;
			word-spacing: -.1em;
			margin: ($vertical-spacing / 2) auto $vertical-spacing;
			line-height: 36px; // Height of the medium TL logo
			color: $color-555;
		}

		.tl-#{$namespace}-auth__accesskey_wrapper {
			padding: $gutter-width;
			background: $color-light-grey-100;
			border: 1px solid $color-light-grey-600;
			border-radius: $border-radius-small;
			position: relative;
			box-sizing: border-box;

			&:after {
				display: block;
				content: '';
				clear: both;
			}
		}

		.tl-#{$namespace}-auth__accesskey_copy.button {
			position: absolute;
			top: $gutter-width / 2;
			right: $gutter-width;
			height: $large-icon-size + $gutter-width;
			color: $color-555;
			font-size: 1.1em;
			border: 1px solid transparent;
			background: transparent;
			padding: 0 $gutter-width 0 ($gutter-width / 2); // The copy icon looks a bit skewed if centered exactly

			&:hover,
			&.tl-#{$namespace}-auth__copied {
				background: $color-light-grey-100;
				border: 1px solid $color-light-grey-900;
			}

			&:active {
				border: 1px solid $color-555;

				&:after {
					color: $color-555;
				}
			}

			&.tl-#{$namespace}-auth__copied {
				padding-left: $gutter-width;
				background: $color-light-grey-200;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.065);
				font-weight: bold;
			}

			&:after {
				color: $color-666;
				text-decoration: none;
				font-family: Dashicons;
				font-size: $medium-icon-size;
				height: $medium-icon-size;
				width: $medium-icon-size;
				line-height: $medium-icon-size;
				padding-left: $medium-icon-size / 4;
				margin-top: -3px;
				display: inline-block;
				content: "\f105";
				vertical-align: middle;
			}
		}

		p {
			padding: 0;
		}

		a {
			&:hover, &:focus {
				color: $color-111;
			}
		}

		.notice {
			margin: 0 ($gutter-width * 2) ($vertical-spacing / 2);

			h3 {
				font-size: 1.2em;
				line-height: 1.375;
				margin: 12px 0 $vertical-spacing / 2;
			}

			p {
				font-size: 1em;
				margin: 12px 0;
			}
		}

		.tl-#{$namespace}-auth__logo {
			border: 0;
			margin: 0 0 $vertical-spacing;
			padding: 0;
			text-align: center;

			img {
				max-width: 50%;
				max-height: 120px;
			}

			a:after {
				content: ''; // Remove external icon
			}
		}

		.tl-#{$namespace}-auth__admin_debugging {
			text-align: left;
			max-height: 25vh;
			overflow-y: auto;
			text-align: left;
		}

		footer {
			padding: $vertical-spacing / 2;

			ul {
				list-style: none;
				text-align: center;
			}

			li {
				display: inline-block;

				&:after {
					color: lighten($color-555, 20%); // #wp-footer color
					content: '•';
					padding: 0 .75rem;
				}

				&:last-child:after {
					content: '';
					padding: 0;
				}
			}
		}
	}
}
