// https://github.com/HubSpot/drop

.drop-element {
    box-sizing: border-box;
    display: none;
    z-index: 999;

    &:after, &:before {
        box-sizing: border-box;
    }

    * {
        box-sizing: border-box;

        &:after, &:before {
            box-sizing: border-box;
        }
    }

    &.drop-open {
        display: block;
    }

    &.drop-theme-basic {
        max-width: 100%;
        max-height: 100%;

        .drop-content {
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            font-family: inherit;
            background: $color-white;
            color: $color-off-black;
            padding: 1.5em 2.5em;
            line-height: 1.5em;

            > .dropdown-dialog {
                @extend .clearfix;

				.content {
					> p {
	                    margin: 7px 0;
	                    font-size: 1rem;
	                }

					> .heading {
						line-height: 3rem;
						font-size: 1.2rem;
					}
				}

                .actions {
                    margin-top: 15px;
                    float: right;
                }
            }
        }
    }

    &.drop-theme-menu {
        max-width: 100%;
        max-height: 100%;

        .drop-content {
            border-radius: 2px;
            padding: 10px 0 7px 0;
            min-width: 125px;
            @extend .z-depth-1;
            background: $color-white;
            color: $color-off-black;

            .dropdown-menu {
                > ul.menu
                {
                    margin: 0;
                    padding: 0;

                    > li.item {
                        font-size: 0.9em;
                        padding: 7px 14px 7px 14px;
                        cursor: pointer;

                        &:hover {
                            color: $color-link;
							// font-weight: bold;
                        }

                        a, a:visited {
                            text-decoration: none;
                            color: $color-off-black;
                            width: 100%;
                            display: inline-block;

                            &:hover {
                                color: $color-link;
								// font-weight: bold;
                            }
                        }
                    }

                    > .right {
                        text-align: right;
                    }

					> li.danger {
						color: $color-red;

						&:hover {
							color: $color-red;
							// font-weight: bold;
                        }
					}

                    > li.divider {
                        height: 1px;
                        border-top: 1px solid $color-border;
                        margin: 5px 0;
                    }

					> li.disabled {
						color: $color-stroke !important;
						font-weight: normal !important;
						@extend .cursor-not-allowed;

						a, a:visited {
							color: $color-stroke !important;

                            &:hover {
								color: $color-stroke !important;
								font-weight: normal !important;
                            }
                        }
					}
                }
            }
        }
    }
}