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

.ember-attacher-popper {
	background-color: $color-white;
	font-size: 1rem;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	@include border-radius(3px);

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

	> .menu {
		margin: 0;
		padding: 0;
		min-width: 140px;

		> .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($gray-shades, 100);
			}
		}

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

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

		> .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;
		}
	}

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

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