.dropdown{
    position:relative;
    @include clearfix();

    input[type=submit], input[type=reset], input[type=button], button, .button{
        padding:0;
        display:block;
        width:100%;
        height:3em;
        line-height:3em;
        text-align:left;
        padding-left:1em;
        float:left;
    }
    input[type=submit], input[type=reset], input[type=button], button{
        line-height:inherit;
    }

    ul{
        @include unlist();
        background-color:$color-teal;
        position:absolute;
        overflow:hidden;
        top:100%;
        left:-2000px;
        z-index:500;
        opacity:0;

        li{
            float:none;
            border-color: rgba(255,255,255,0.2);
            border-style: solid;
            border-width:1px 0 0 0;
            overflow:hidden;
        }

        a{
            box-sizing:border-box;
            white-space: nowrap;
            position:relative;
            text-decoration:none;
            text-transform:uppercase;
            display:block;
            color:white;
            padding:1em;
            font-weight:normal;

            &:hover{
                background-color:$color-teal-darker;
            }
            &.icon{
                padding-right:5em;

                &:before,
                &:after{
                    right:1em;
                }
            }
            &.shortcut{
                padding-right:7em;
            }
        }

        a, input[type=submit], input[type=reset], input[type=button], .button, button{
            font-size:0.95em;
            -webkit-font-smoothing: auto;
            @include border-radius(0);
        }

        label{
            padding:1.3em;
        }

        .kbd{
            position:absolute;
            right:1em;
            font-weight:600;
            font-size:0.8em;
            color:rgba(0,0,0,0.3);
        }

    }

    &.open ul{
        @include box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2));
        opacity:1;
        left:0;
        display:block;
    }

    &.match-width ul{
        width:100%;
        min-width:110px;

        li{
            white-space: nowrap;
        }
    }


    &.dropup ul{
        @include box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
        top:auto;
        bottom:100%;

        li{ 
            border-width:0 0 1px 0;
        }
    }   

    .dropdown-toggle{
        color:white;
        text-transform:uppercase;
        background-color:$color-teal;
        line-height:2.8em;
        cursor:pointer;
        height:100%;
        border-left:1px solid rgba(255,255,255,0.2);
        position:absolute;
        right:0;
        padding:0 0.5em;
        text-align:center;

        &:before,
        &:after{
            margin:0;
        }

        &:before{
            width:1em;
            font-size:1.2rem;
        }

        &:hover{
            background-color:$color-teal-darker;
        }
    }

    &.open .dropdown-toggle{
        background-color:$color-teal-darker;
    }

    /* Styles for dropdowns which are also buttons e.g page editor */
    
    &.dropdown-button{
        .dropdown-toggle{
            @include border-radius(0 3px 3px 0);
        }
        &.open{
            > input[type=button], > input[type=submit], > button, > .button{
                @include border-radius(3px 3px 0px 0px);
            }
            .dropdown-toggle{
                @include border-radius(0 3px 0 0);
            }
        }
    }

    &.dropup.dropdown-button{
        &.open{
            > input[type=button], > input[type=submit], > button, > .button{
                @include border-radius(0 0 3px 3px);
            }
            .dropdown-toggle{
                @include border-radius(0 0 3px 0);
            }
        }
    }
}

.dropdown.white{
    ul{
        background-color:white;

        li{
            border-top:1px solid rgba(0,0,0,0.1);
        }

        a{
            color:$color-grey-2;

            &:hover{
                background-color:$color-grey-3;
            }
        }
    }
}

/* Transitions */
.dropdown ul{
    @include transition(opacity 0.2s linear);
}