@import 'utilities';

// All styles are !important so as to ensure it doesn't blend it with theme styling;
// the point is to stand out with WordPress UI styling instead.

.wpedit-link{
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 999 !important;

	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 8px !important;

	background: #222 !important;
	color: #fff !important;
	font: 400 13px/32px "Open Sans", sans-serif !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	text-transform: none !important;

	opacity: 1 !important;
	visibility: visible !important;

	-webkit-font-smoothing: subpixel-antialiased !important;
	-webkit-transition: opacity .2s, visibility .2s !important;
	-moz-transition: opacity .2s, visibility .2s !important;

	&:hover{
		background: #333 !important;

		&, &:before{
			color: #45bbe6 !important;
		}
	}

	&:after {
		content: none !important;
	}

	&:before{
		content: '\f464' !important;
		float: left !important;
		font: 400 20px/1 dashicons !important;
		color: #999 !important;

		position: relative !important;
		top: 2px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 0 !important;

		width: auto !important;
		height: auto !important;
		padding: 4px 0 !important;
		margin: 0 6px 0 0 !important;

		speak: none !important;

		-webkit-font-smoothing: antialiased !important;
		-moz-osx-font-smoothing: grayscale !important;
	}

	// Anchor to specific corners
	&.right {
		left: auto !important;
		right: 0 !important;
	}
	&.bottom {
		top: auto !important;
		bottom: 0 !important;
	}

	// Static, inline styling
	&.static{
		position: static !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		float: left !important;
		display: inline-block !important;
		*display: inline;

		&.right{
			float: right !important;
		}

		&.below{
			margin-top: 16px !important;
		}
		&.above{
			margin-bottom: 16px !important;
		}
	}

	.wpedit-hidden & {
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

#wp-admin-bar-wpedit-toggle {
	a:before {
		content: '\f177';
	}
}