/* Navigation
   ========================================================================== */

/**
 * Hide the navigation menu toggle button on desktop layout.
 *
 * Example HTML:
 *
 * <button class="txp-nav-toggle">
 */

button.txp-nav-toggle {
    display: none;
}

/**
 * Base styling for the navigation menu.
 *
 * Example HTML:
 *
 * <nav class="txp-nav">
 */

.txp-nav {
    flex: none;
    margin: 0;
    list-style: none;

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    > ul {
        display: flex;
    }

    a {
        color: $color-text;

        &:hover {
            text-decoration: none;
        }
    }
}

@include dark-mode {
    .txp-nav a {
        color: $color-text;
    }
}

/**
 * Primary-level navigation menu items (dropdown toggles).
 *
 * Example HTML:
 *
 * <nav class="txp-nav">
 *     <ul class="data-dropdown">
 *         <li class="dropdown selected">
 *             <a class="dropdown-toggle">
 *                 Content
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li class="selected"><a></a></li>
 *                 <li><a></a></li>
 *             </ul>
 *         </li>
 *         <li class="dropdown">
 *             <a class="dropdown-toggle">
 *                 Presentation
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *             </ul>
 *         </li>
 *         <li class="dropdown open">
 *             <a class="dropdown-toggle">
 *                 Admin
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *             </ul>
 *         </li>
 *         <li>
 *             <a>
 *                 Non-dropdown link
 *             </a>
 *         </li>
 *     </ul>
 * </nav>
 */

.txp-nav > ul > li {
    display: block;
    position: relative;
    border-right: 1px solid $color-accent-gradient-to;
    background: rgba($color-text-inverse, 0.25);

    &:first-child {
        border-left: 1px solid $color-accent-gradient-to;
    }

    > a {
        display: block;
        padding: 0 1em;
        color: darken($color-text, 20%);
        line-height: 2.69230769230769; // 35px / 13px
        text-decoration: none;

        &:hover {
            background: rgba($color-text-inverse, 0.25);
        }
    }

    &.selected > a {
        background: rgba($color-text-inverse, 0.25);

        &:hover {
            background: rgba($color-text-inverse, 0.4);
        }
    }
}

/**
 * Reverse border in RTL languages.
 */

[dir="rtl"] .txp-nav > ul > li {
    border-right: 0;
    border-left: 1px solid $color-accent-gradient-to;

    &:first-child {
        border-right: 1px solid $color-accent-gradient-to;
    }
}

/**
 * Indicator symbols on closed dropdown toggle links.
 */

.txp-nav > ul > li > a.dropdown-toggle {
    position: relative;
    padding: 0 1.61538461538462em 0 1em;

    &::after {
        @include hide-text;

        content: "\2193";
        display: block;
        position: absolute;
        z-index: 10;
        top: 1em;
        right: 0.5625em; // 9px / 16px
        width: 0;
        height: 0;
        border: 0 solid transparent;
        border-width: 0.25em 0.25em 0;
        border-top-color: $color-text;
        opacity: 0.5;
        font-size: 16px;
    }

    &:hover::after,
    &:active::after {
        opacity: 1;
    }
}

/**
 * Indicator symbols in RTL languages.
 */

[dir="rtl"] .txp-nav > ul > li > a.dropdown-toggle {
    padding: 0 1em 0 1.61538461538462em;

    &::after {
        right: auto;
        left: 0.5625em; // 9px / 16px
    }
}

/**
 * Indicator symbols on open dropdown toggle links.
 */

.txp-nav > ul > li.open > a.dropdown-toggle::after {
    content: "\2191";
    border: 0 solid transparent;
    border-width: 0 0.25em 0.25em;
    border-bottom-color: $color-text;
}

/**
 * Secondary-level navigation menu items (dropdown menus).
 *
 * Example HTML:
 *
 * <nav class="txp-nav">
 *     <ul class="data-dropdown">
 *         <li class="dropdown selected">
 *             <a class="dropdown-toggle">
 *                 Content
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *                 <li class="selected"><a></a></li>
 *             </ul>
 *         </li>
 *         <li class="dropdown">
 *             <a class="dropdown-toggle">
 *                 Presentation
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *             </ul>
 *         </li>
 *         <li class="dropdown open">
 *             <a class="dropdown-toggle">
 *                 Admin
 *             </a>
 *             <ul class="dropdown-menu">
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *                 <li><a></a></li>
 *             </ul>
 *         </li>
 *         <li>
 *             <a>
 *                 Non-dropdown link
 *             </a>
 *         </li>
 *     </ul>
 * </nav>
 */

.dropdown-menu {
    display: none;
    position: absolute;
    z-index: 20000;
    top: 3em;
    left: 0;
    flex: none;
    min-width: 12em;
    border: 1px solid;

    @if $border-radius > 0 {
        border-radius: 0 $border-radius $border-radius;
    }

    background: $color-highlight-box;

    @if $flat-theme < 1 {
        border-color: $color-border-light;
        border-top: 0;
        box-shadow: $standard-shadow;
    } @else {
        border-color: $color-border;
    }

    li {
        @if $border-radius > 0 {
            &:first-child {
                border-radius: 0 $border-radius 0 0;
            }

            &:last-child {
                border-radius: 0 0 $border-radius $border-radius;
            }
        }

        &:hover {
            background: lighten($color-accent-gradient-from, 21%);
        }

        &.selected {
            background: lighten($color-accent-gradient-from, 14%);
        }
    }

    a {
        display: block;
        padding: 0.5em 1em;
        white-space: nowrap;
    }

    // Indicator pointer.

    &::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -0.5em; // 8px / 16px
        left: 0.75em; // 12px / 16px;
        width: 1em;
        height: 0.5em;
        background: url("../img/sprite.svg") no-repeat -12em 0;
        background-size: 13em 2em; // 208px / 16px + 32px / 16px
        font-size: 16px;
    }
}

@if $flat-theme < 1 {
    @include dark-mode {
        .dropdown-menu {
            box-shadow: $dark-standard-shadow;
        }
    }
}

/**
 * Secondary-level navigation menu in RTL languages.
 */

[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;

    @if $border-radius > 0 {
        border-radius: $border-radius 0;

        li:first-child {
            border-radius: $border-radius 0 0;
        }
    }

    // Indicator pointer.

    &::before {
        right: 0.75em; // 12px / 16px;
        left: auto;
    }
}

/**
 * Show drop-down menu when toggle clicked.
 *
 * Example HTML:
 *
 * <li class="dropdown open">
 *     <a class="dropdown-toggle">
 *         Admin
 *     </a>
 *     <ul class="dropdown-menu">
 *         <li><a></a></li>
 *         <li><a></a></li>
 *         <li><a></a></li>
 *     </ul>
 * </li>
 */

.open > .dropdown-menu {
    display: block;
}