@toolbar-width: 180px;
//Toolbar
.pojo-a11y-toolbar-position(@direction) {

	&.pojo-a11y-toolbar-@{direction} {
		@{direction}: -@toolbar-width;
		
		-webkit-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-moz-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		-o-transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
		transition: @direction 750ms cubic-bezier(0.230, 1.000, 0.320, 1.000);

		&.pojo-a11y-toolbar-open {
			@{direction}: 0;
		}

		& when (@direction = left) {
			.pojo-a11y-toolbar-toggle {
				left: 180px;
			}
		}

		& when (@direction = right) {
			.pojo-a11y-toolbar-toggle {
				right: 180px;
			}
		}
	}
}

#pojo-a11y-toolbar {
	position: fixed;
	font-size: 16px !important;
	line-height: 1.4;
	z-index: 9999;

	.pojo-a11y-toolbar-position(right);
	.pojo-a11y-toolbar-position(left);

	.pojo-a11y-toolbar-toggle {
		position: absolute;

		a {
			display: inline-block;
			font-size: 200%;
			line-height: 0;
			padding: 10px;
			-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
			box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);

			&:hover,
			&:focus {
				-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
				box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
			}
		}

		svg {
			max-width: inherit; //Compatibility for Twenty Twenty theme `svg {max-width:100%;}`
		}
	}
	
	.pojo-a11y-toolbar-overlay {
		border: 1px solid;
		font-size: 100%;
		width: @toolbar-width;

		p.pojo-a11y-toolbar-title {
			display: block;
			line-height: 2;
			font-weight: bold;
			padding: 10px 15px 0;
			margin: 0;
		}

		&.pojo-a11y-toolbar-open {

			.pojo-a11y-toolbar-toggle a,
			.pojo-a11y-toolbar-overlay {
				-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
				box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
			}
		}

		ul.pojo-a11y-toolbar-items {
			list-style: none;
			margin: 0;
			padding: 10px 0;

			&.pojo-a11y-links {
				border-top: 1px solid;
			}

			li.pojo-a11y-toolbar-item {

				a {
					display: block;
					padding: 10px 15px;
					font-size: 80%;
					line-height: 1;

					&.active {
						font-weight: bold;
					}

					svg {
						padding-right: 6px;
                        display: inline-block;
                        width: 1.5em;
                        font-style: normal;
                        font-weight: normal;
                        font-size: inherit;
                        line-height: 1;
                        text-align: center;
                        text-rendering: auto;
                        vertical-align: middle;
                    }

                    .pojo-a11y-toolbar-text {
                        vertical-align: middle;
                    }
				}
			}
		}
	}
}

body.rtl {

	#pojo-a11y-toolbar {

		.pojo-a11y-toolbar-overlay {

			ul.pojo-a11y-toolbar-items {

				li.pojo-a11y-toolbar-item {

					a {

						svg {
							padding-left: 6px;
							padding-right: 0;
						}
					}
				}
			}
		}
	}
}

// Responsive
@media (max-width: 767px) {

	#pojo-a11y-toolbar {

		.pojo-a11y-toolbar-overlay {

			p.pojo-a11y-toolbar-title {
				padding: 7px 12px 0;
			}

			ul.pojo-a11y-toolbar-items {
				padding: 7px 0;

				li.pojo-a11y-toolbar-item {

					a {
						display: block;
						padding: 7px 12px;
					}
				}
			}
		}
	}
}