/**
 * This file provides the styles for the page tools
 * (fly out navigation beside the page to edit, etc).
 *
 * @author Anika Henke <anika@selfthinker.org>
 * @author Andreas Gohr <andi@splitbrain.org>
 */

#dokuwiki__site > .site {
	/* give space to the right so the tools won't disappear on smaller screens */
	/* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
	padding-right: 40px;
	/* give the same space to the left to balance it out */
	padding-left: 40px;
}

.dokuwiki div.page {
	height: 190px;
	min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
	height: auto;
}

#dokuwiki__pagetools {
	@ico-width: 28px;
	@ico-margin: 8px;
	@item-width: (@ico-width + @ico-margin + @ico-margin);
	@item-height: (@ico-width + @ico-margin);

	position: absolute;
	right: (-1 * @item-width);
	/* on same vertical level as first headline, because .page has 2em padding */
	top: 2em;
	width: @item-width;

	div.tools {
		position: fixed;
		width: @item-width;

		ul {
			position: absolute;
			right: 0;
			text-align: right;
			margin: 0;
			padding: 0;
			/* add transparent border to prevent jumping when proper border is added on hover */
			border: 1px solid transparent;
			z-index: 10;

			li {
				padding: 0;
				margin: 0;
				list-style: none;
				font-size: 0.875em;

				a {

					display: block;
					/* add transparent border to prevent jumping when proper border is added on focus */
					border: 1px solid transparent;
					white-space: nowrap;
					line-height: @item-height;
					vertical-align: middle;
					height: @item-height;

					span {
						display: none; // hide label until hover
						margin: 0 @ico-margin;
					}

					svg {
						width: @ico-width;
						height: @ico-width;
						margin: 0 @ico-margin;
						display: inline-block;
						vertical-align: middle;
						fill: @ini_border;
					}
				}

				// on interaction show the full item
				a:active,
				a:focus,
				a:hover {
					background-color: @ini_background_alt;

					span {
						display: inline-block;
					}

					svg {
						fill: @ini_link;
					}
				}
			}
		}
	}

	[dir=rtl] & {
		right: auto;
		left: (-1 * @item-width);

		div.tools {
			ul {
				right: auto;
				left: 0;
				text-align: left;
			}
		}
	}
}

// on hover or focus show all items
#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
	div.tools ul {
		background-color: @ini_background;
		border-color: @ini_border;
		border-radius: 2px;
		box-shadow: 2px 2px 2px @ini_text_alt;

		li a span {
			display: inline-block;
		}
	}
}
