@hdeng-dropdown-width: 200px;
@hdeng-dropdown-bg-color: @hdeng-header-bg-contrast-color;
@hdeng-dropdown-bg-highlight-color: @hdeng-header-bg-highlight-color;
@hdeng-dropdown-font-color: #ccc;
@hdeng-dropdown-font-highlight-color: #fff;

//== Visible part / label
.hdeng-dropdown-critical() {
    position: relative;

    display: inline-block;

    font-size: 14px;
    line-height: @hdeng-spacing;

    & > button,
    & > a {
        // <button> reset
        -webkit-appearance: none;
        border: 0;
        outline: none;
        text-shadow: none;
        box-shadow: none;
        text-decoration: none;
        font: inherit;

        &::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

        cursor: pointer;

        display: inline-block;
        padding: 9px 15px 11px;

        border-radius: @hdeng-border-radius;
        background: @hdeng-dropdown-bg-color;
        color: @hdeng-dropdown-font-color;

        &:visited {
            color: @hdeng-dropdown-font-color;
        }
    }

    > ul {
        display: none;
    }
}

.hdeng-dropdown() {
    > ul {
        position: absolute;
        left: 0;
        z-index: 9998;

        margin: 0;
        padding: 0;
        min-width: @hdeng-dropdown-width;

        background-color: @hdeng-dropdown-bg-color;
        border-radius: @hdeng-border-radius;
        box-shadow: 0 0 floor(@hdeng-spacing / 4) rgba(0, 0, 0, 0.12);
        list-style: none;
        text-align: left;

        & > li {
            position: relative;
            white-space: nowrap;
            display: block;

            border-bottom: 1px solid rgba(0, 0, 0, 0.05);

            &:last-child {
                border-bottom: none;
            }
        }

        & > li > a {
            display: block;
            padding: 9px 15px 11px;

            color: @hdeng-dropdown-font-color;
            font-size: 13px;
            text-decoration: none;

            &:visited {
                color: #ccc;
            }

            &:hover {
                background-color: @hdeng-dropdown-bg-highlight-color;
                color: @hdeng-dropdown-font-highlight-color;
                text-decoration: none;
            }
        }

        ul {
            top: 0;
            right: @hdeng-dropdown-width;
            z-index: 2;

            margin-top: -3px;
        }
    }
}

.hdeng-dropdown-open() {
    > ul {
        display: block;
    }

    & > button,
    & > a {
        position: relative;
        z-index: 9999;
        color: @hdeng-dropdown-font-highlight-color;

        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    & > ul {
        display: block;

        border-top-left-radius: 0;

        & > li:first-child > a {
            border-radius: 0 @hdeng-border-radius 0 0;
        }

        & > li:last-child > a {
            border-radius: 0 0 @hdeng-border-radius @hdeng-border-radius;
        }
    }
}

.hdeng-dropdown-open-right() {
    > ul {
        left: auto;
        right: 0;

        border-top-left-radius: @hdeng-border-radius;
        border-top-right-radius: 0;

        & > li:first-child > a {
            border-radius: @hdeng-border-radius 0 0 0;
        }
    }
}

.hdeng-dropdown-open-up() {
    & > button,
    & > a {
        border-radius: 0 0 @hdeng-border-radius @hdeng-border-radius;
    }

    > ul {
        top: auto;
        bottom: 40px;

        border-radius: @hdeng-border-radius @hdeng-border-radius @hdeng-border-radius 0;

        & > li:first-child > a {
            border-radius: @hdeng-border-radius @hdeng-border-radius 0 0;
        }

        & > li:last-child > a {
            border-radius: 0 0 @hdeng-border-radius 0;
        }
    }
}

.hdeng-dropdown-open-up-right() {
    > ul {
        border-radius: @hdeng-border-radius @hdeng-border-radius 0 @hdeng-border-radius;

        & > li:last-child > a {
            border-radius: 0 0 0 @hdeng-border-radius;
        }
    }
}

//== Generates
.hdeng-dropdown-critical-generate() {
    .dropdown {
        .hdeng-dropdown-critical();
    }
}

.hdeng-dropdown-generate() {
    .dropdown {
        .hdeng-dropdown();

        &:hover {
            .hdeng-dropdown-open();
        }
    }

    .dropdown--open {
        .hdeng-dropdown-open();

        &.dropdown--right {
            .hdeng-dropdown-open-right();
        }

        &.dropdown--up {
            .hdeng-dropdown-open-up();
        }

        &.dropdown--up.dropdown--right {
            .hdeng-dropdown-open-up-right();
        }
    }
}
