// Menu styles
// ----------------------------------------------

/* SG
# Menu/Navigation


```
<nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">DATA</button>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">STYLE</button>
    </li>
    <li class="CDB-NavMenu-Item is-selected">
      <button class="CDB-NavMenu-Link">POP-UP</button>
      <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
        <li class="CDB-NavSubmenu-Item is-selected">
          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
        </li>
        <li class="CDB-NavSubmenu-Item">
          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
        </li>
      </ul>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">LEGEND</button>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
    <!-- ready for a button -->
  </div>
</nav>

<br/><br/>
<br/><br/>

<div style="background: #2E3C43; height: 100px; padding: 20px;">
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-Item CDB-Text">
        <button class="CDB-NavMenu-Link">DATA</button>
      </li>
      <li class="CDB-NavMenu-Item">
        <button class="CDB-NavMenu-Link">STYLE</button>
      </li>
      <li class="CDB-NavMenu-item is-selected">
        <button class="CDB-NavMenu-Link">POP-UP</button>
        <ul class="CDB-NavSubmenu CDB-NavSubmenu--inside CDB-Size-small">
          <li class="CDB-NavSubmenu-Item is-selected">
            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
          </li>
          <li class="CDB-NavSubmenu-Item">
            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
          </li>
        </ul>
      </li>
      <li class="CDB-NavMenu-Item">
        <button class="CDB-NavMenu-Link">LEGEND</button>
      </li>
    </ul>
  </nav>
</div>

<br/><br/>
<br/><br/>

<nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">DATA</button>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">STYLE</button>
    </li>
    <li class="CDB-NavMenu-Item is-selected">
      <button class="CDB-NavMenu-Link">POP-UP</button>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">LEGEND</button>
    </li>
  </ul>

  <ul class="CDB-NavSubmenu CDB-NavSubmenu--outside CDB-Text CDB-Size-small is-semibold js-menu">
    <li class="CDB-NavSubmenu-Item is-selected">
      <button class="CDB-NavSubmenu-Link u-upperCase">Click</button>
    </li>
    <li class="CDB-NavSubmenu-Item">
      <button class="CDB-NavSubmenu-Link u-upperCase">Hover</button>
    </li>
  </ul>
</nav>
```
*/

@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';

.CDB-NavMenu {
  position: relative;
}

.CDB-NavMenu-Inner {
  position: relative;
  margin-bottom: 18px;
  border-bottom: 1px solid $cMainLine;
}

.CDB-NavMenu-Link {
  display: block;
  margin-bottom: -1px;
  padding: 4px 0 11px;
  border-bottom: 1px solid transparent;
  color: $cBlue;
}

.CDB-NavMenu-Item,
.CDB-NavSubmenu-Item {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
  border-bottom: 1px solid $cBlack;
  color: $cMainText;
}

.CDB-NavSubmenu {
  border-bottom: 1px solid $cSecondaryLine;
}

.CDB-NavSubmenu--inside {
  position: absolute;
  right: 0;
  left: 0;
  padding-top: 14px;
}

.CDB-NavSubmenu--outside {
  margin-top: -5px;
  margin-bottom: 18px;
}

.CDB-NavSubmenu-Link {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 12px;
  border-bottom: 1px solid transparent;
  color: $cBlue;
}

.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
  border-bottom: 1px solid $cMainLine;
  color: $cMainText;
}

.CDB-NavSubmenu-Status {
  margin-left: 2px;
}

.CDB-Navmenu.is-dark {

  .CDB-NavMenu-Inner,
  .CDB-NavSubmenu {
    border-bottom: 1px solid $cSecondaryText;
  }

  .CDB-NavMenu-Link,
  .CDB-NavSubmenu-Link {
    color: $cAltText;
  }

  .CDB-NavMenu-Item.is-selected .CDB-NavMenu-Link {
    border-bottom: 1px solid $cMainLine;
    color: $cWhite;
  }

  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-Link {
    border-bottom: 1px solid $cMainLine;
    color: $cWhite;
  }

  .CDB-NavSubmenu-Status {
    color: $cSecondaryText;
  }
}