// https://github.com/kybishop/ember-attacher

.ember-attacher-popper {
	background-color: $color-white;
	font-size: 1rem;
	-webkit-box-shadow: 3px 3px 33px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 3px 3px 33px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	// -webkit-box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);
    // box-shadow: 0 20px 66px 0 rgba(34,48,73,0.2);

	@include border-radius(3px);

	> p {
		margin: 4px;
		padding: 0;
	}

	> .menu {
		margin: 0;
		padding: 0;
		min-width: 140px;
		max-height: calc(100vh - 200px);
		overflow: hidden;
		overflow-y: auto;

		> .item {
			color: map-get($gray-shades, 800);
			background-color: transparent;
			display: block;
			list-style-type: none;
			margin: 0;
			border: 0;
			white-space: nowrap;
			text-align: left;
			padding: 0.5rem 1.5rem;
			font-size: 1rem;
			cursor: pointer;

			&:hover {
				color: $color-black;
				background-color: map-get($yellow-shades, 100);
				@include border-radius(3px);
			}
		}

		> .header {
			color: $color-white;
			background-color: $theme-500;
			font-size: 1rem;
			font-weight: 600;
			cursor: auto;

			&:hover {
				color: $color-white;
				background-color: $theme-500;
				}
		}

		> .divider {
			margin: 0;
			padding: 0;
			height: 1px;
			border-top: 1px solid map-get($gray-shades, 200);
			list-style-type: none;
		}

		.red {
			color: map-get($red-shades, 600);

			&:hover {
				color: map-get($red-shades, 800);
			}
		}

		.green {
			color: map-get($green-shades, 600);

			&:hover {
				color: map-get($green-shades, 800);
			}
		}

		.yellow {
			color: map-get($yellow-shades, 600);

			&:hover {
				color: map-get($yellow-shades, 800);
			}
		}

		.bold {
			font-weight: 600;
		}
	}

	> .closer {
		color: map-get($gray-shades, 500);
		font-weight: 300;
		font-size: 1.7rem;
		cursor: pointer;
		padding: 5px 5px 0 0;
		display: block;
		text-align: right;

		&:hover {
			color: map-get($gray-shades, 700);
		}
	}

	> .container {
		padding: 0 20px 20px 20px;
	}

	> .form {
		padding: 20px;
		width: 300px;

		> .caption {
			font-size: 1rem;
			font-weight: 600;
			color: map-get($gray-shades, 800);
		}
	}
}