$height-dropdown-panel: 30px;

.dropdown-panel {
	position: relative;
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
	height: $height-dropdown-panel;
	z-index: $zindex-1;

	& > ul {
		//  overflow-x: auto;
    }
    
    .dropdown-panel-block {
        display: block;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        & > li {
            align-items: center;
            display: flex;
            flex: 1 0 0;
            padding: 0;
        }
    }

	ul {
		list-style: none;
		margin: 0;
		min-height: $height-dropdown-panel;

		li {
            @include flex-centered();

			cursor: pointer;
			margin: 0;
			padding: 0px $control-padding;
			text-decoration: none;
			float: left;
			height: $height-dropdown-panel;
			line-height: $height-dropdown-panel;

			&:hover:not(.dropdown-nohover):not(.active),
			&:focus:not(.dropdown-nohover):not(.active) {
				background: $bg-0-color;

				ul {
                    display: block;
				}
			}

			&.active {
				background: $primary-color;
				color: $light-color;
			}
		}

		&.dropdown-top {
			top: initial;
			bottom: $height-dropdown-panel;
		}

		ul {
			background:  rgba($bg-color, .8);;
			padding: 0;
			text-align: center;
			display: none;
			width: 100%;
			position: absolute;
			top: $height-dropdown-panel;
			left: 0px;
		}
	}
}