@import "type";

$light: #ffffff;
$border_light: #f1f1f1;
$medium: #5cabd6;
$highlight: #0073aa;
$dark: #23282d;
$black: #000;

$gray_10: #1a1a1a;
$gray_30: #4d4d4d;
$gray_50: #808080;
$gray_80: #cccccc;

@mixin flexbox($justify: center, $align: center, $direction: row, $wrap: nowrap) {
	// CSS Flexbox container properties
	display: flex;
	display: -webkit-flex;

	flex-direction: $direction;
	-webkit-flex-direction: $direction;

	flex-wrap: $wrap;
	-webkit-flex-wrap: $wrap;

	justify-content: $justify;
	-webkit-justify-content: $justify;

	align-items: $align;
	-webkit-align-items: $align;

}

@mixin flex($grow:0, $shrink:1, $align-self: auto) {
	flex-grow: $grow;
	-webkit-flex-grow: $grow;
	flex-shrink: $shrink;
	-webkit-flex-shrink: $shrink;
	align-self: $align-self;
	-webkit-align-self: $align-self;
}

%genericon {
	font-family: Genericons, Noticons;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
}

body {
	margin:0;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 1;
	overflow: visible;
	@include flexbox(flex-start, stretch, column);

}

pre, code {
	font-family: Inconsolata, monospace;

	.tools_page_rest_api_console & {
		background: transparent;
	}
}

.code {
	font-family: Inconsolata, monospace;
	font-size: 16px;
}

:focus {
	outline: none;
}

section#builder {
	padding-top: 45px;
}

/* +Main Toolbar */

div#path {
	top: 0;
	left: 0;
	right: 0;
	min-height: 44px;
	font-size: 18px;
	z-index: 4;
	position: fixed;
	box-shadow: 0 0 8px hsla(0,0%,0%,0.35);

	@include flexbox(center, stretch);

	> div {
		padding: 8px 8px 6px;
		background: $light;
	}

	#versions {
		top: 0;
		background: $dark;
		color: $light;
		padding-right: 24px;

		> span {
			display: inline-block;
			vertical-align: -2px;
		}

		&::after {
			font-style: Inconsolata, monospace;
			font-size: 16px;
			right: 8px;
			top: 8px;
		}

	}

}

div#parts {

	position: relative;
	overflow: visible;
	background: $light;
	padding: 0 8px;
	line-height: 22px;
	@include flexbox(flex-start, center, row, wrap);

	// As a flexbox child element expands to fill space
	@include flex(1, 1);

	> div {
		font-size: 16px;
		font-family: Inconsolata, monospace;
		padding: 3px 1px 3px 1px;
		line-height: 16px;
		min-height: 16px;
		color: $medium;
		overflow: hidden;

		// CSS3 Flexbox child properties
		@include flex(0, 0);

		&.segment {
			cursor: default;
		}

		&.param {
			background: $border_light;
			color: $highlight;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis "";
			position: relative;
			padding-left: 6px;
			padding-right: 6px;
			border-radius: 1px;
			margin: 1px 0;
			max-width: 25%;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			overflow: hidden;

			&:only-child {
				background: $light;
				padding: 0;
				@include flex(1,0);
				max-width: 100%;
			}

			&:last-child {
				max-width: 100%;
			}

			&:focus {
				outline: none;
			}

		}
	}

	> div:first-child {
		margin-left: 0;
	}

}

#lookup-container {
	position: relative;
	@include flexbox(flex-start, center, row, nowrap);
	@include flex(1,1);
}

.throbber {
	padding: 0 18px;
	display: inline-block;

	.loading & {
		display: inline-block;
	}

	div {
		border-radius: 100%;
		border: 1px solid $light;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		width: 14px;
		height: 14px;
		-webkit-animation: throbber ease-out 0.7s infinite;
		-moz-animation: throbber ease-out 0.7s infinite;
		animation: throbber ease-out 0.7s infinite;

	}

	#version_loader & {
		padding-left: 8px;
		div {
			border-color: $dark;
		}
	}

}

div.param {

	&::after {
		content: attr(data-label);
		color: $border_light;
	}

	&.modified::after {
		display: none;
	}

}

.option_selector {
	font-weight: 100;
	font-size: 14px;
	position: relative;
	cursor: pointer;
	display: inline-block;
	border-radius: 1px;
	overflow: visible;
	background: $border_light;
	color: $medium;
	padding: 2px 20px 0 4px;
	line-height: 24px;
	@include flex(0,0);

	#path & {
		font-family: Inconsolata, monospace;
		font-size: 16px;
		top: -1px;
	}

	> span {
		display: inline-block;
		border-radius: 4px;
	}


	&:hover, &:active, &:focus {
		outline: none;
		color: $light;
		background: $medium;
	}

	&::after {
		content: '\25BE';
		font-family: "Open Sans", sans-serif;
		display: inline-block;
		position: absolute;
		right: 6px;
		top: 0px;
	}

	&.disabled {
		padding-right: 4px;
		cursor: default;
		background: transparent;

		&::after {
			visibility: hidden;
		}

		&:hover, &:active, &:focus {
			outline: none;
			color: $border_light;
			background: transparent;
			color: $medium;
		}

	}

}

.options {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	z-index: 2;
	vertical-align: text-bottom;

	ul {
		border-radius: 1px;
		position: relative;
		top: 1px;
		margin: 0;
		padding: 4px 0;
		list-style: none;
		background: $medium;
		color: $light;
	}

	li {
		padding: 3px 18px 1px 8px;
		white-space: nowrap;
		position: relative;
		&.selected {
			&::after {
				font-size: 12px;
				content: " \2713";
				position: absolute;
				right: 4px;
			}
		}

		&:hover {
			background: $highlight;
			color: $light;
		}

		&.highlight {
			background: $medium;
			color: $light;
		}
	}

}

div#submit {
	cursor: pointer;
	min-width: 44px;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;

	div#path > & {
		background: url(../res/return-@2x.png) no-repeat center center $highlight;
		background-size: 24px 24px;
		color: $border_light;

		&:hover, &:focus {
			outline: none;
			background-color: $medium;
		}

		&:active, &.active {
			color: $medium;
			background-color: $light;
			background-image: url(../res/return-dark-@2x.png);
		}

	}

}


#search {
	padding: 0;
	width: 24px;
	text-align: right;
	cursor: pointer;
	background: none;
	position: relative;

	@include flex(0,0);


	a {
		position: absolute;
		top: 50%;
		left: 50%;
		-moz-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		display: inline-block;
		vertical-align: -2px;
		content: '';
		color: $light;
		border-radius: 100%;
		width: 24px;
		height: 24px;
		opacity: 1;
		overflow: hidden;
		background: url(../res/search-dark-@2x.png) no-repeat center center transparent;
		background-size: 16px 16px;
		cursor: default;

		.endpoint & {
			background-image: url(../res/close-dark-@2x.png);;
			cursor: pointer;

			&:hover {
				background-color: $medium;
				background-image: url(../res/close-@2x.png);
			}

			&:active {
				background-color: $medium;
				background-image: url(../res/close-@2x.png);
			}

		}

	}

}

#lookup {

	div#lookup-container > & {
		font-family: "Open Sans", sans-serif;
		font-size: 16px;
		position: absolute;
		padding: 0;
		left: 0px;
		right: 0px;
		top: 100%;
		z-index: 3;
		background: none;
		overflow: visible;
		box-shadow: 0 2px 4px $black;

	}

	> ol {
		position: relative;
		opacity: 0.96;
		list-style: none;
		padding: 0;
		margin: 0;
		background: $light;
		position: relative;
		top: 1px;
		max-height: 280px;
		overflow-y: auto;
	}

	li {
		margin: 0;
		padding: 8px;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: hsl(202,10%,40%);
		font-weight: 100;

		&.unselectable {
			cursor: default;
		}

		&.group {
			font-size: 12px;
			font-weight: bold;
			border-top: 1px solid $highlight;
			padding-top: 15px;
			margin-top: 8px;
			&:first-child {
				border-top: 0;
				margin-top: 0;
			}
			&::before {
				margin-right: 4px;
				font-size: 16px;
				font-weight: normal;
				@extend %genericon;
				vertical-align: text-bottom;
			}
		}

		&.highlight {
			background-color: $border_light;

			&.unselectable {
				background-color: transparent;
			}
		}

		&:last-child {
			border-bottom: 0;
		}

		> code {
			color: $highlight;
			margin-right: 5px;
			display: inline-block;
		}

		> span {
			font-family: Inconsolata, monospace;
			color: $gray_50;
			width: 45px;
		}

		> em, > strong {
			font-size: 14px;
			font-weight: 100;
			font-style: italic;
			color: hsl(202,10%,40%);
		}

		strong {
			font-weight: normal;
			text-transform: capitalize;

			&::after {
				content: ':';
			}
		}

		&.loading {
			padding: 32px 0;
			text-align: center;
		}

		&.history {
			&::before {
				content: '\f303';
			}
		}

		.throbber {
			padding: 0 8px;


			div {
				border-color: $dark;
			}
		}

	}

}

section#parameters {
	font-size: 14px;

	padding: 16px 24px;
	@include flexbox(center, stretch);
	position:relative;
	border-bottom: 1px solid $border_light;

	> div {
		min-height: 20px;
		min-width: 50%;
		max-width: 50%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		position: relative;

		// CSS3 Flexbox
		@include flex(1,0);

		&:first-child {
			margin-right: 8px;
		}

		&:last-child {
			margin-left: 8px;
		}

		&.disabled {
			opacity: 0.25;
		}
	}

	div.raw {
		font-family: Inconsolata, monospace;
		background: $light;
		color: $highlight;
		min-height: 50px;
		padding: 8px;
		max-width: 100%;
		word-break: break-all;
		word-break: break-word;
		font-size: 16px;
		max-height: 220px;
		overflow-y: auto;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	header {
		background: $light;
		color: $medium;
		padding: 8px;
		font-weight: normal;
		font-size: 14px;
		text-transform: uppercase;
		border-bottom: 1px solid $border_light;
	}


	table {
		width: 100%;
		max-width: 100%;
		border-collapse: collapse;
	}

	div.scroller {
		position: relative;
		max-height: 222px;
		overflow-y: scroll;
	}

	th, td {
		vertical-align: top;
		border-bottom: 1px solid $border_light;
		padding: 0;
	}

	tr:last-child {
		th, td {
			border-bottom: none;
		}
	}

	th {
		width: 30%;
		padding: 8px;
		font-weight: normal;
		background: $border_light;
		text-align: left;
		color: $highlight;
		font-size: 14px;
		cursor: default;
	}

	td div {
		padding: 8px;
		font-size: 16px;
		max-width: 100%;
		min-height: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		word-break: break-word;
		background: $light;
		font-family: Inconsolata, monospace;
		color: $highlight;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	div:focus {
		outline: none;
	}

} /// section#parameters

div.container {
	position: relative;

	&::after {
		content: "";
		bottom: 0;
		right: 0;
		left: 0;
		height: 6px;
		z-index: 1;
		position: absolute;
		background: linear-gradient(hsla(0,0%,0%,0.0), hsla(0,0%,0%,0.2));
		background: -webkit-linear-gradient(hsla(0,0%,0%,0.0), hsla(0,0%,0%,0.2));
		background: -moz-linear-gradient(hsla(0,0%,0%,0.0), hsla(0,0%,0%,0.2));
	}

	&::before {
		content: "";
		top: 0;
		right: 0;
		left: 0;
		height: 6px;
		z-index: 1;
		position: absolute;
		background: linear-gradient(hsla(0,0%,0%,0.2), hsla(0,0%,0%,0.0));
		background: -webkit-linear-gradient(hsla(0,0%,0%,0.2), hsla(0,0%,0%,0.0));
		background: -moz-linear-gradient(hsla(0,0%,0%,0.2), hsla(0,0%,0%,0.0));
	}

	&.at-top::before {
		opacity: 0;
	}

	&.at-bottom::after {
		opacity: 0;
	}
}

/*Tooltip*/

#tip {
	position: absolute;
	top: 120px;
	left: 500px;
	background: $gray_10;
	max-width: 300px;
	min-width: 150px;
	color: $gray_80;
	font-size: 12px;
	opacity: 0.9;
	line-height: 1.4;
	word-break: break-all;
	word-break: break-word;
	z-index: 3;
	transition: opacity 100ms;
	-moz-transition: opacity 100ms;
	-webit-transition: opacity 100ms;

	.anchor {
		position: absolute;
		top: 16px;
		left: 0;
		content: "";
		width: 10px;
		height: 10px;
		background: $gray_10;
		transform: translate(-5px,-5px) rotate(45deg);
		-moz-transform: translate(-5px,-5px) rotate(45deg);
		-webkit-transform: translate(-5px,-5px) rotate(45deg);
		z-index: 0;
	}

	header {
		position: relative;
		padding: 8px;
		z-index: 1;

		@include flexbox(center, baseline);

		code {
			color: $light;
			margin-right: 10px;

			@include flex(1, 1);

		}

	}

	em {
		color: $light;
	}

	ul {
		position: relative;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 1;

		code {
			color: $highlight;
		}

	}

	li {
		padding: 8px;
		border-top: 1px solid hsla(0,0%,100%,0.1);
	}

} // #tip

#requests {

	@include flex(1,1);

} // #requests


.body {
	font-size: 16px;
	margin: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	white-space: nowrap;
}

code {

	&.compact {
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		white-space: nowrap;
		color: $gray_50;
	}

	span {
		&.key {
			color: hsl(296,77%,32%);
		}
		&.string {
			color: hsl(100,90%,40%);
		}
		&.number {
			color: hsl(210,90%,60%);
		}
	}

}

.log {

	background: $light;

	#requests & {
		@include flexbox('flex-start', 'flex-start');

		cursor: pointer;
		border-bottom: 1px solid $border_light;
		padding: 8px 0 8px 16px;

		&:focus {
			outline: none;
			background-color: $border_light;
		}

		> div {
			&:first-child {
				@include flex(1,1);
				overflow: hidden;
				max-width: 100%;
			}
			&:last-child {
				@include flex(0,0);
				text-align: right;
				min-width: 40px;
			}
		}

	}

	.throbber {
		position: relative;
		top: 4px;
		left: -12px;
		padding: 0;

		div {
			border-color: $medium;
		}

	}

	header {

		@include flexbox('flex-start', 'center');
		line-height: 1.5;
		min-width: 320px;

		> code {
			display: block;
		}

		> code:first-of-type {
			color: $gray_50;
			text-transform: uppercase;
			margin-right: 8px;
			flex-shrink: 0;
			-webkit-flex-shrink: 0;
		}

		> code:nth-of-type(2) {
			color: $highlight;
		}

		> code:nth-last-of-type(1) {
			flex-grow: 1;
			-webkit-flex-grow: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		em {
			font-style: normal;
			color: hsl(202,9%,44%);
		}

		> span {
			color: $gray_50;
			white-space: nowrap;
			font-size: 12px;
		}

		> span:last-child {

			&::before {
				@extend %genericon;
				content: '\f303';
				font-size: 16px;
				line-height: 14px;
				vertical-align: -3px;
				margin-right: 2px;
			}

		}

	} // #requests header

	&.request-error header > span:last-child {
		color: #f00;

		&::before {
			content: '\f414';
			margin-right: 8px;
		}
	}

	.compact {
		line-height: 18px;
	}

	a[download] {
		padding: 3px;
		font-size: 12px;
		border-radius: 2px;
		text-decoration: none;
		display: inline-block;
		vertical-align: -2px;
		margin-right: 8px;
		border: 1px solid $border_light;
		color: $border_light;

		&:hover {
			padding: 4px;
			border: none;
			background: $highlight;
			color: $light;
		}

		&:focus, &:active {
			padding: 3px;
			border: 1px solid $highlight;
			background: $light;
			color: $highlight;
		}

		&::before {
			content: "\2B07\FE0E";
		}
	}

}

#detail {
	@include flexbox(flex-start, stretch, column);
	position: fixed;
	right: 0;
	top: 0;
	left: 32px;
	bottom: 0;
	opacity: 1;
	background: $light;
	-webkit-transition: -webkit-transform 300ms, opacity 300ms;
	-moz-transition: -moz-transform 300ms, opacity 300ms;
	transition: transform 300ms, opacity 300ms;
	-webkit-transform: translate(105%, 0);
	-moz-transform: translate(105%, 0);
	transform: translate(105%, 0);
	z-index: 50;
	box-shadow: 0 0 5px $black;

	&.display {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	header {
		padding: 8px 16px 8px 8px;
		background: $border_light;
		@include flex(0,0);

		> span:first-child {
			cursor: pointer;
			width: 16px;
			height: 20px;
			margin-right: 8px;
			background: url(../res/disclosure-dark-@2x.png) center center no-repeat;
			background-size: 16px 16px;
			-moz-transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			transform: rotat(180deg);
			opacity: 0.5;

			&:hover {
				opacity: 1;
			}

		}

	}

	> div {
		overflow: auto;
		padding: 8px 8px 6px;
		@include flex(1,1);
	}

	.viewer {
		padding-top: 38px;

		pre {
			padding: 0;
			margin: 0;
			line-height: 18px;
			color: $highlight;
		}

	}
}

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: $black;
	z-index: 49;
	opacity: 0;
	-webkit-transform: translate(100%,0);
	-moz-transform: translate(100%,0);
	transform: translate(100%,0);
	-moz-transition: opacity 200ms;
	-webkit-transition: opacity 200ms;
	transition: opacity 200ms;

	&.display {
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		opacity: 1;
	}
}

#reference {

	@include flexbox(flex-start, stretch, column);

	height: 0;
	-webkit-order: -1;
	overflow: hidden;
	transition: height 200ms;
	-moz-transition: height 200ms;
	-webkit-transition: height 200ms;
	position: relative;
	box-sizing: border-box;

	header {
		@include flex(0,0);

		h2 {
			font-size: 14px;
			font-weight: normal;
			margin: 8px;
			padding: 0;
			display: inline-block;
			vertical-align: middle;
		}

		> div {
			display: inline-block;
			margin: 0 8px 0 0;
			vertical-align: middle;

			> span {
				display: inline-block;
				font-size: 14px;
				margin-right: 4px;

				&:after {
					content: ':';
				}
			}

		}

	}

	.browser {
		@include flexbox('flex-start', 'stretch');
		@include flex(1,1);
		> div {
			@include flex(1,1);
			background: $light;
			overflow: auto;
			min-width: 20%;
			max-width: 40%;
			box-sizing: border-box;
			margin-right: 1px;

			&:focus {
				outline: none;
			}

			&:first-child {
				border: none;
			}

			&:last-child {
				margin-right: 0;
				max-width: none;
				border: none;
			}

		}
		li {

			line-height: 18px;
			cursor: pointer;
			padding: 4px 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			border-bottom: 1px solid $highlight;

			&.selected {
				background: $border_light;
			}

			.path {
				@extend .code;
				display: block;
				color: $dark;
			}

			.description {
				display: block;
				font-size: 14px;
			}

		}

		:focus li.selected {
			background: $medium;
			color: $light;

			.path {
				color: $light;
			}
		}
	}

	&.open {
		height: 480px;
	}

	ol {
		list-style: none;
		margin: 0;
		padding: 0;
	}
}

.view-segment {
	margin: 0 auto;
	list-style: none;
	cursor: pointer;
	@include flexbox(center, flex-start);
	font-size: 12px;
	height: 0;
	position: relative;
	top: 6px;
	z-index: 5;

	li {
		background: $light;
		padding: 4px 8px;
		margin: 0;
		border: 1px solid $highlight;
		border-width: 1px 1px 1px 0;
		color: $highlight;

		&:first-child {
			border-radius: 1px 0 0 1px;
			border-left-width: 1px;
		}

		&:last-child {
			border-radius: 0 1px 1px 0;
		}

		&.selected {
			background: $highlight;
			color: $light;
		}

	}

}

.json-browse {

	line-height: 18px;

	ol {
		padding: 0;
		list-style: none;
		display: block;
		margin: 0;

		ol {
			margin: 0 0 0 8px;;
		}

	}

	li {

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;

		> span::before {
			content: '';
			margin-left: 1px;
			width: 12px;
			height: 16px;
			display: inline-block;
			position: relative;
			vertical-align: 0px;
			color: $gray_50;
			font-size: 10px;
			-moz-transition: -moz-transform 200ms;
			-webkit-transition: -webkit-transform 200ms;
			transition: transform 200ms;
			-webkit-transform-origin: 4px 7px;
			-moz-transform-origin: 4px 7px;
			transform-origin: 4px 7px;
		}

		> span:hover::before {
			color: $gray_30;
		}

		&.closed > span::before, &.open > span::before {
			content: '\25B6';
		}

		&.open {

			> span::before {
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				transform: rotate(90deg);
			}
		}

		&.closed {
			max-width: 100%;
		}

		> span {
			cursor: pointer;
			color: $gray_50;
		}

		> span:first-child {

			code {
				color: hsl(296,77%,32%);
			}

		}

	}

}

@-webkit-keyframes throbber {
	0%   { opacity: 0; -webkit-transform: scale(0,0); border-width: 7px; }
	50%  { opacity: 1; border-width: 7px;}
	100% { opacity: 0; -webkit-transform: scale(1.1,1.1); border-width: 0px; }
}
@-moz-keyframes throbber {
	0%   { opacity: 0; -moz-transform: scale(0,0); border-width: 7px; }
	50%  { opacity: 1; border-width: 7px;}
	100% { opacity: 0; -moz-transform: scale(1,1); border-width: 0px; }
}
@-o-keyframes throbber {
	0%   { opacity: 0; -o-transform: scale(0,0); border-width: 7px; }
	50%  { opacity: 1; border-width: 7px;}
	100% { opacity: 0; -o-transform: scale(1,1); border-width: 0px; }
}
@keyframes throbber {
	0%   { opacity: 0; transform: scale(0,0); border-width: 7px; }
	50%  { opacity: 1; border-width: 7px;}
	100% { opacity: 0; transform: scale(1,1); border-width: 0px; }
}