//
// Dropdown
// --------------------------------------------------


// Utility
%dropdown-list-item-link {
    @include link-variant($font-gray-light, $font-gray-light, none, none);
    padding: 12px 43px 12px #{ $padding-horz };
    display:block;
    text-align:left;
}

.dropdown {
	margin-top: $margin-vert;
    display:inline-block;
    position:relative;
    background: $bg-white;
    border: #{$border-style-gray-thin};
    line-height: $icon-base-size;
    
    a {
        @include transition-duration(0s);
    }
    
    a.dropdown-value {
        @extend %dropdown-list-item-link;
    }
    
    .value {
        display:block;
        padding:0px;
        white-space:nowrap;
        overflow:hidden;
    }
    
    &.has-value
    ,&.is-dropdown-open {
        a.dropdown-value {
            @extend %dropdown-list-item-link;
            @include link-variant($font-color-base, $font-color-base, none, none);
        }
    }
	
	//---------------------------------------
	// Contact Plugin Overrides
	
	.wpcf7-form-control-wrap {
		display:none;
	}
}

// Dropdown arrow/caret
.dropdown-icon {
    position:absolute;
    top:0;
    right:0;
    padding: 0 $padding-horz;
    line-height: 44px;
    font-size: 13px;
    color: $font-color-base;
    top:-1px;
}

// The dropdown menu wrapper
.dropdown-menu {
    @include box-shadow( #{$box-shadow} );
    position: absolute;
    z-index: 1000;
    display: none;
    top: auto;
    left:0;
    min-width:100%;
    margin-top:1px;
    border:0;
    font-size:$font-size-base;
    padding:0;
    float:none;
    
    &.right {
        left:auto;
        right:0;
    }
}

// The dropdown menu (ul)
ul.dropdown-list {
    width:100%;
    list-style: none;
    line-height:normal;
    overflow: visible;
    padding: 4px 0;
    margin: 0;
    display:inline-block;
    max-height:150px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
    background: $bg-white;
    font-weight: $font-normal;
    @include box-shadow( #{$box-shadow} );

    li.dropdown-list-item {
        list-style: none;
        padding: 0px;
        margin: 0;
        height:auto;
        text-align:left;
        line-height: 10px;

        > a {
            @extend %dropdown-list-item-link;
            @include link-variant($font-color-base, $font-color-base, none, none);
            white-space: nowrap;

            // State for dropdown item (Selected)
            &.is-selected
            ,&:hover{
                background-color: $bg-gray-lightest;
            }
        }
    }
}


// State for dropdown (Open)
.is-dropdown-open {
    &:not(.dropdown) {
        overflow: hidden;
    }
    
    &.dropdown {
        .dropdown-menu {
            display: block;
        }
    }
}


// Alternate dropdown (Wrap)
.dropdown-wrap {
    ul.dropdown-list li > a {
        white-space: normal;
    }
}