@hdeng-subnav-header-diversification-color: @hdeng-color-shark;
@hdeng-subnav-list-color: @hdeng-color-dark;

// == Generates
.hdeng-subnav-critical-generate() {
    //Silence
}

.hdeng-subnav-generate() {
    .subnav-transition(@property) {
        transition-timing-function: @hdeng-ease-out-function;
        transition-duration: 250ms;
        transition-property: @property;
    }

    .subnav {
    }

    .subnav-small() {
        .subnav {
            height: @hdeng-subnav-height-small;

            @media (max-width: @hdeng-breakpoint-container) {
                height: (@hdeng-subnav-height-small + floor(@hdeng-spacing / 4));
            }
        }

        .subnav__bar {
            height: @hdeng-subnav-height-small;

            @media (max-width: @hdeng-breakpoint-container) {
                height: (@hdeng-subnav-height-small + floor(@hdeng-spacing / 4));
            }
        }

        .subnav__item {
            height: @hdeng-subnav-height-small;
            vertical-align: top;

            @media (max-width: @hdeng-breakpoint-container) {
                height: (@hdeng-subnav-height-small + floor(@hdeng-spacing / 4));
            }
        }

        .subnav__item.hover {
            .subnav__icon {
                opacity: 0;
            }

            .subnav__label {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition-delay: 0.0001ms, 0.0001ms;
            }

        }

        .subnav__link {
            height: @hdeng-subnav-height-small;

            @media (max-width: @hdeng-breakpoint-container) {
                height: (@hdeng-subnav-height-small + floor(@hdeng-spacing / 4));
            }
        }

        .subnav__icon {
            .subnav-transition(opacity);

            @media (max-width: @hdeng-breakpoint-container) {
                //margin-top: 25px;
            }
        }

        .subnav__label {
            text-align: center;
            bottom: 26px;
            transform: translate3d(0, -@hdeng-subnav-height-small, 0);
            opacity: 0;
            .subnav-transition(~"opacity, transform");
            transition-delay: 0.0001ms, 250ms;
        }

        .subnav__text {
            font-size: 12px;
        }
    }

    .subnav-mobile() {
        .subnav {
            height: @hdeng-subnav-height-mobile;
        }

        .subnav__bar {
            height: @hdeng-subnav-height-mobile;
        }

        .subnav__title {
            visibility: visible;
            top: 0;
            right: @hdeng-content-padding-mobile;
            left: @hdeng-content-padding-mobile;
            text-align: left;
            opacity: 1;
            line-height: @hdeng-subnav-height-mobile;
            padding: 0;

            @media (min-width: @hdeng-breakpoint-mobile) {
                text-align: right;
            }
        }

        .subnav__list {
            text-align: left;
            position: absolute;
            top: -20000em;
            left: -20000em;
            background-color: @hdeng-subnav-list-color;
            overflow: hidden;
            margin: 0;
            box-shadow: 0 2px floor(@hdeng-spacing / 4) 0 rgba(0, 0, 0, 0.16), 0 2px floor(@hdeng-spacing / 2) 0 rgba(0, 0, 0, 0.12);

            @media (min-width: @hdeng-breakpoint-mobile) {
                position: absolute;
                right: 0;
                width: 250px;
            }
        }

        .subnav--mobile {
            .subnav__list {
                position: absolute;
                top: @hdeng-subnav-height-mobile;
                left: 0;
                width: 100%;

                @media (min-width: @hdeng-breakpoint-mobile) {
                    position: absolute;
                    left: auto;
                    right: 0;
                }
            }
        }

        .subnav__item {
            height: auto;
            display: block;
            min-width: 100%;
            border-bottom: 1px solid darken(@hdeng-subnav-list-color, 7%);

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

        .subnav__link {
            height: auto;
            vertical-align: middle;
            width: 100%;
            font-size: 14px;
            line-height: @hdeng-spacing;
            padding: floor(@hdeng-spacing / 2);
        }

        .subnav__label {
            position: static;
            display: inline-block;
            padding-left: 20px; // Icon widths
        }

        .subnav__icon {
            position: absolute;
            left: floor(@hdeng-spacing / 2);
            top: floor(@hdeng-spacing / 2);
            margin: 0;
        }
    }

    .subnav {
        height: @hdeng-subnav-height;
        .subnav-transition(height);
        background-color: @hdeng-subnav-list-color;
    }

    .subnav__bar {
        height: @hdeng-subnav-height;
        .subnav-transition(height);
        .hdeng-clearfix();
        position: relative;
        z-index: @hdeng-subnav-z-index;
        width: 100%;
        background-color: @hdeng-subnav-list-color;
        box-shadow: 0 4px 4px -2px rgba(21, 21, 21, 0.4);
    }

    .subnav__title {
        color: @hdeng-color-silver;
        visibility: hidden;
        transition-timing-function: @hdeng-ease-out-function;
        transition-duration: 250ms;
        transition-property: top, opacity;
        position: absolute;
        top: -100px;
        right: 0;
        opacity: 0;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        line-height: 18px;
        margin: 0;
        padding: floor(@hdeng-spacing / 2) 15px floor(@hdeng-spacing / 2) 30px;
        @media (max-width: @hdeng-breakpoint-container) {
            padding-right: floor(@hdeng-spacing / 4);
        }
        @media (max-width: @hdeng-breakpoint-mobile) {
            font-size: 14px;
        }
    }

    .subnav__list {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
        letter-spacing: -0.31em;
        text-rendering: optimizespeed;
    }

    .subnav__item {
        height: @hdeng-subnav-height;
        width: 100%;
        max-width: 165px;

        .subnav-transition(~"width, height");

        display: inline-block;
        letter-spacing: normal;
    }

    .subnav__link {
        height: @hdeng-subnav-height;
        .subnav-transition(height);
        position: relative;
        display: block;
        width: 100%;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        line-height: @hdeng-spacing;
        overflow: hidden;

        &:visited,
        &:active,
        &:focus {
            color: #fff;
            text-decoration: none;
        }
    }

    .subnav__item--current,
    .subnav__item--current-ancestor,
    .subnav__item .subnav__link:hover,
    .subnav__item .subnav__link[aria-expanded="true"],
    .subnav__item .subnav__link[aria-selected="true"] {
        color: #fff;
        background-color: darken(@hdeng-subnav-header-diversification-color, 7%);
    }

    .subnav__icon {
        position: relative;
        display: block !important;
        margin: @hdeng-spacing auto 0 auto;
        margin-bottom: floor(@hdeng-spacing / 4);
    }

    .subnav__label {
        position: absolute;
        left: 0;
        bottom: floor(@hdeng-spacing / 2);
        width: 100%;
        font-size: 14px;
        background: transparent;
    }

    .subnav__text {
        margin: 0 floor(@hdeng-spacing / 2);
    }

    @media (min-width: @hdeng-breakpoint-mobile) AND (max-width: @hdeng-breakpoint-container) {
        .subnav-small();
    }

    @media (max-width: @hdeng-breakpoint-mobile) {
        .subnav-mobile();
    }
}
