.skip-to.popup {
	position: absolute;
	top: -30em;
	left: 0
}

	.skip-to, .skip-to.popup.focus {
		position: absolute;
		top: 0;
		left: $positionLeft
	}

		.skip-to.fixed {
			position: fixed
		}

		.skip-to button {
			position: relative;
			margin: 0;
			padding: 6px 8px 6px 8px;
			border-width: 0 1px 1px 1px;
			border-style: solid;
			border-radius: 0 0 6px 6px;
			border-color: $buttonBackgroundColor;
			color: $menuTextColor;
			background-color: $buttonBackgroundColor;
			z-index: 200
		}

		.skip-to .skip-to-tooltip {
			position: absolute;
			top: 2.25em;
			left: 8em;
			margin: 1px;
			padding: 4px;
			border: 1px solid #ccc;
			box-shadow: 2px 3px 5px #ddd;
			background-color: #eee;
			color: #000;
			font-family: Helvetica,Arial,Sans-Serif;
			font-variant-numeric: slash-zero;
			font-size: 9pt;
			width: auto;
			display: none;
			white-space: nowrap;
			z-index: 201
		}

			.skip-to .skip-to-tooltip.skip-to-show-tooltip {
				display: block
			}

		.skip-to [aria-expanded=true] + .skip-to-tooltip.skip-to-show-tooltip {
			display: none
		}

		.skip-to [role=menu] {
			position: absolute;
			min-width: 17em;
			display: none;
			margin: 0;
			padding: .25rem;
			background-color: $menuBackgroundColor;
			border-width: 2px;
			border-style: solid;
			border-color: $focusBorderColor;
			border-radius: 5px;
			z-index: 1000
		}

		.skip-to [role=group] {
			display: grid;
			grid-auto-rows: min-content;
			grid-row-gap: 1px
		}

		.skip-to [role=separator]:first-child {
			border-radius: 5px 5px 0 0
		}

		.skip-to [role=menuitem] {
			padding: 3px;
			width: auto;
			border-width: 0;
			border-style: solid;
			color: $menuTextColor;
			background-color: $menuBackgroundColor;
			z-index: 1000;
			display: grid;
			overflow-y: auto;
			grid-template-columns: repeat(6,1.2rem) 1fr;
			grid-column-gap: 2px;
			font-size: 1em
		}

			.skip-to [role=menuitem] .label:first-letter, .skip-to [role=menuitem] .level:first-letter {
				text-decoration: underline;
				text-transform: uppercase
			}

			.skip-to [role=menuitem] .level {
				text-align: right;
				padding-right: 4px
			}

			.skip-to [role=menuitem] .label {
				margin: 0;
				padding: 0;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis
			}

			.skip-to [role=menuitem].skip-to-h1 .level {
				grid-column: 1
			}

			.skip-to [role=menuitem].skip-to-h2 .level {
				grid-column: 2
			}

			.skip-to [role=menuitem].skip-to-h3 .level {
				grid-column: 3
			}

			.skip-to [role=menuitem].skip-to-h4 .level {
				grid-column: 4
			}

			.skip-to [role=menuitem].skip-to-h5 .level {
				grid-column: 5
			}

			.skip-to [role=menuitem].skip-to-h6 .level {
				grid-column: 8
			}

			.skip-to [role=menuitem].skip-to-h1 .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-h2 .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-h3 .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].skip-to-h4 .label {
				grid-column: 5/8
			}

			.skip-to [role=menuitem].skip-to-h5 .label {
				grid-column: 6/8
			}

			.skip-to [role=menuitem].skip-to-h6 .label {
				grid-column: 7/8
			}

			.skip-to [role=menuitem].skip-to-h1.no-level .label {
				grid-column: 1/8
			}

			.skip-to [role=menuitem].skip-to-h2.no-level .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-h3.no-level .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-h4.no-level .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].skip-to-h5.no-level .label {
				grid-column: 5/8
			}

			.skip-to [role=menuitem].skip-to-h6.no-level .label {
				grid-column: 6/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-1 .nesting {
				grid-column: 1
			}

			.skip-to [role=menuitem].skip-to-nesting-level-2 .nesting {
				grid-column: 2
			}

			.skip-to [role=menuitem].skip-to-nesting-level-3 .nesting {
				grid-column: 3
			}

			.skip-to [role=menuitem].skip-to-nesting-level-0 .label {
				grid-column: 1/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-1 .label {
				grid-column: 2/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-2 .label {
				grid-column: 3/8
			}

			.skip-to [role=menuitem].skip-to-nesting-level-3 .label {
				grid-column: 4/8
			}

			.skip-to [role=menuitem].action .label, .skip-to [role=menuitem].no-items .label {
				grid-column: 1/8
			}

		.skip-to [role=separator] {
			margin: 1px 0 1px 0;
			padding: 3px;
			display: block;
			width: auto;
			font-weight: 700;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: $menuTextColor;
			background-color: $menuBackgroundColor;
			color: $menuTextColor;
			z-index: 1000
		}

			.skip-to [role=separator] .mofn {
				font-weight: 400;
				font-size: 85%
			}

			.skip-to [role=separator]:first-child {
				border-radius: 5px 5px 0 0
			}

		.skip-to [role=menuitem].last {
			border-radius: 0 0 5px 5px
		}

		.skip-to.focus {
			display: block
		}

		.skip-to button:focus, .skip-to button:hover {
			background-color: $menuBackgroundColor;
			color: $menuTextColor;
			outline: 0
		}

		.skip-to button:focus {
			padding: 6px 7px 5px 7px;
			border-width: 0 2px 2px 2px;
			border-color: $focusBorderColor
		}

		.skip-to [role=menuitem]:focus {
			padding: 1px;
			border-width: 2px;
			border-style: solid;
			border-color: $focusBorderColor;
			background-color: $menuitemFocusBackgroundColor;
			color: $menuitemFocusTextColor;
			outline: 0
		}