$close-red:                     #ff6159;
$close-red-active:              #bf4942;
$close-red-icon:                #4d0000;
$close-red-icon-active:         #190000;

$minimize-yellow:               #ffbd2e;
$minimize-yellow-active:        #bf8e22;
$minimize-yellow-icon:          #995700;
$minimize-yellow-icon-active:   #592800;

$maximize-green:                #28c941;
$maximize-green-active:         #1d9730;
$maximize-green-icon:           #006500;
$maximize-green-icon-active:    #003200;

$disabled-gray:                 #ddd;

.traffic-lights {
	position: absolute;
	top: 1px;
	left: 8px;
	transition: top $nav-locked-transition-duration $nav-locked-transition-easing;

	body.focus &, &:hover, &:active {
		> .traffic-light-close {
			background-color: $close-red;

			&:active:hover {
				background-color: $close-red-active;
			}
		}
		> .traffic-light-minimize {
			background-color: $minimize-yellow;

			&:active:hover {
				background-color: $minimize-yellow-active;
			}
		}
		> .traffic-light-maximize {
			background-color: $maximize-green;

			&:active:hover {
				background-color: $maximize-green-active;
			}
		}
	}

	> .traffic-light {
		&:before, &:after {
			visibility: hidden;
		}
	}

	&:hover, &:active {
		> .traffic-light {
			&:before, &:after {
				visibility: visible;
			}
		}
	}
	
	body.locked & {
		top: 27px;
	}
}

.traffic-light {
	border-radius: 100%;
	padding: 0;
	height: 12px;
	width: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	margin-right: 3.5px;
	background-color: $disabled-gray;
	position: relative;
	outline: none;

	&:before, &:after {
		content: '';
		position: absolute;
		border-radius: 1px;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	&-close {
		&:before, &:after {
			background-color: $close-red-icon;
			width: 8px;
			height: 1px;
		}
		&:before {
			transform: rotate(45deg) translate(-0.5px, -0.5px);
		}
		&:after {
			transform: rotate(-45deg) translate(0.5px, -0.5px);
		}
		&:active:hover:before, &:active:hover:after {
			background-color: $close-red-icon-active;
		}
	}

	&-minimize {
		&:before {
			background-color: $minimize-yellow-icon;
			width: 8px;
			height: 1px;
			transform: translateY(-0.5px);
		}
		&:active:hover:before {
			background-color: $minimize-yellow-icon-active;
		}
	}

	&-maximize {
		&:before {
			background-color: $maximize-green-icon;
			width: 6px;
			height: 6px;
		}
		&:after {
			background-color: $maximize-green;
			width: 10px;
			height: 2px;
			transform: rotate(45deg);
		}
		&:active:hover:before {
			background-color: $maximize-green-icon-active;
		}
		&:active:hover:after {
			background-color: $maximize-green-active;
		}
	}
}
