$menu-shadow: #dee9ef;

@mixin gap-zselect {
    .zselect {
        border: 1px solid $medium-gray;
        min-height: 2.5rem;
        position: relative;

        .selected-list {
            display: inline;
        }

        .zinput {
            background-color: inherit;
            border: 0;
            box-shadow: none;
            display: inline;
            margin: $zero;
        }

        .drop-wrap {
            background: $white;
            box-shadow: 0 2px 10px 0 $menu-shadow;
            max-height: 160px;
            min-height: 100px;
            overflow-y: auto;
            padding: 8px 0 10px;
            position: absolute;
            width: 100%;
            z-index: 99;

            ul {
                list-style: none;
                margin: $zero;

            }

            li {
                &:hover {
                    background: $light-gray;
                }
            }

            .drop-item {
                display: inline-block;
                height: 100%;
                overflow: hidden;
                padding: 8px;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
            }

            .active {
                background: $medium-gray;
            }
        }

        .selected-wrap {
            .selected-item {
                color: $black-color;
                padding-left: .5em;
                word-break: break-all;
            }
        }
    }
}