@import "bourbon";

/**
 * Styling Begins
 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.forkit {
	position: fixed;
	right: 0;
	top: 0;
	width: 200px;
	height: 150px;
	z-index: 10000;
	text-decoration: none;
	font-family: $helvetica;

	.tag {
		color: #fff;
		width: 200px;
		height: 30px;
		display: block;
		font-size: 13px;
		font-weight: bold;
		line-height: 30px;
		text-align: center;
		background: #aa0000;
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
		@include transform-origin(15px 0px);

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 196px;
			height: 26px;
			margin: 1px;
			border: 1px solid rgba(255,255,255,0.4);
		}
	}

	.string {
		width: 0;
		height: 1px;
		display: block;
		position: absolute;
		background: rgba(255,255,255,0.7);
		box-shadow: 0 0 10px rgba(0,0,0,0.4);
		@include transform-origin(0px 0px);
	}
}

.forkit-curtain {
	position: fixed;
	top: -100%;
	width: 100%;
	height: 100%;
	z-index: 9999;
	color: #f5f5f5;
	padding-top: 10%;
	text-align: center;
	background: rgba(0,0,0,0.8);

	a {
		color: #74e685;
		text-decoration: none;

		&:hover {
			color: #d3f3d7;
		}
	}

	h1,
	h2 {
		font-size: 24px;
		display: inline-block;
	}

	h2 {
		color: #ccc;
	}

	p {
		margin: 10px 0;
		font-size: 15px;
	}

	del {
		opacity: 0.3;
	}

	small {
		display: block;
		margin: 10px 0 20px;
		color: #bbb;
	}

	article {
		margin: 20px;
		width: 480px;
		display: inline-block;
	}

	.close-link {
		cursor: pointer;
		color: #777;
		padding: 7px;
		position: absolute;
		top: 20px;
		right: 20px;
		text-align: center;
		border-radius: 100%;
		background-color: #fff;
		-webkit-transition: color .1s ease-in-out,background .1s ease-in-out;
		transition: color .1s ease-in-out,background .1s ease-in-out;

		&:before {
			content: '\f158';
			font: normal 20px/1 'dashicons';
			speak: none;
			vertical-align: middle;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&:hover,
		&:focus {
			color: #0084ce;
			background: #ddd;
		}

		&:focus {
			outline: none;
		}
	}
}

body.admin-bar {
	.forkit {
		top: 32px;
	}

	.forkit-curtain {
		.close-link {
			top: 40px;
			right: 10px;
		}
	}
}