@import "../variables";

.hover-view-menu {
	position:absolute;
	top:50px;
	right:10px;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-end;
	z-index:12;

	&-img {
		background-color:$white;
	}

	&-dropdown {
		display: none;
		justify-content: flex-start;
		flex-flow:column nowrap;
		background-color: $dark-grey;
		color:$white;
		margin-top: 10px;

		&:before {
			content: "";
			display: block;
			position: absolute;
			top: 38px;
  			right: 14px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 5px 7px 5px;
			border-color: transparent transparent $dark-grey transparent;
		}

		&-item {
			display:flex;
			flex-flow:row nowrap;
			justify-content:flex-start;
			padding: 10px 20px 7px;
			cursor:pointer;
			border-bottom: 1px solid $medium-grey;
			transition: all 300ms;

			&:hover {
				background-color: lighten($dark-grey, 10%);
			}

			&-checkbox {
				padding-right:10px;
			}

			&-text {
				text-transform: capitalize;
			}
		}
	}


	&:hover &-dropdown {
		display:flex;
	}
}
