@import "../variables";

.replay-playlist {
	flex:0 0 200px;
	background: $dark-grey;
	color: $white;
	position: relative;
	z-index:10;
	display:flex;
	flex-flow:column;
	height:100%;
	width:200px;
}

.replay-player {
	display:flex;
	justify-content:space-around;
	flex:0 0 40px;
	
	&-pause, &-play {
		height:40px;
		display:flex;
		flex:1;
		align-items:center;
		justify-content:center;
		font-size:30px;
		cursor:pointer;

		&:hover {
			background-color:$blue;
		}
	}
}

.events {
	flex: 1 1 100%;
	list-style-type:none;
	padding:0;
	margin:0;
	width:100%;
}

.patch {
	&-name {
		background-color: $blue !important;
	}
}

.event {
	&-name {
		margin:10px 20px;
		background-color: $yellow;
		color: $dark-grey;
		padding:5px;
		border-radius:3px;
	}

	&.is-active &-name {
		background-color: $red;
	}

	&-buttons {
		display:flex;
		background-color:lightgreen;
		justify-content:space-between;
		max-height:0px;
		transition: max-height .2s ease;
		overflow:hidden;

		&-go-here, &-details {
			padding:5px;
			flex:1 1 50%;
			display:flex;
			align-items:center;
			justify-content:center;
		}
	}

	&:hover &-buttons {
		max-height:30px;
	}

	&-details {
		position: absolute;
		top: 0;
		left: -700px;
		width: 700px;
		background: $base3;
		height: calc(100% + 14px);
		top: -14px;
		color: $violet;
		padding:10px;

		&-title {
			margin-bottom:5px;
		}

		&-params {
			height:calc(100% - 80px);
		}

		&-close {
			position:absolute;
			top:30px;
			right:10px;
			background-color: $base03;
			color: $base3;
			padding:5px 10px;
			border-radius:3px;
			cursor:pointer;

			&:hover {
				background-color: $base02;
			}
		}
	}
}

.json-pretty {
	height:calc(100% - 80px);
}

.json-key {
	color: $base01;
}

.json-string {
	color: $magenta;
}

.json-value {
	color: $blue;
}
