// 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>


<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">
        <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>
</div>

```
*/

.CDB-NavMenu {
  position: relative;
  z-index: 2;
}

.CDB-NavMenu-inner {
  position: relative;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-line);

  &--no-margin {
    margin-bottom: 0;
  }

  &--is-dropdown {
    padding-top: $baseSize;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: $baseSize * 2;
  }
}


.CDB-NavMenu-link {
  display: block;
  margin-bottom: -1px;
  padding: 4px 0 11px;
  transition: border-color 0.2s ease-in;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-blue);

  &:hover {
    border-bottom: 2px solid var(--color-blue-hover);
  }
}

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

.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
  border-bottom: 2px solid $cMainText;
  color: $cMainText;
}

.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
  pointer-events: none;
  color: var(--color-text-alt);
  cursor: default;
}

.CDB-NavSubmenu {
  border-bottom: 2px solid var(--color-line-secondary);

  &--inside {
    position: absolute;
    right: 0;
    left: 0;
    padding-top: 14px;
  }

  &--outside {
    margin-top: -5px;
    margin-bottom: 18px;
  }
}

.CDB-NavSubmenu-link {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 12px;
  transition: border-color 0.2s ease-in;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-blue);

  &:hover {
    border-bottom: 2px solid var(--color-blue-hover);
  }
}


.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
  border-bottom: 2px solid var(--color-line);
  color: $cMainText;
}

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

.CDB-NavMenu.is-dark {
  .CDB-NavMenu-inner,
  .CDB-NavSubmenu {
    border-bottom: 1px solid var(--color-text-secondary);
  }

  .CDB-NavMenu-link,
  .CDB-NavSubmenu-link {
    margin-bottom: -1px;
    color: var(--color-text-alt);

    &:hover {
      border-bottom: 2px solid darken(var(--color-line), 8%);
    }
  }

  .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
    pointer-events: none;
    cursor: default;
    opacity: 0.24;
  }

  .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
    border-bottom: 2px solid var(--color-line);
    color: white;
  }

  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
    border-bottom: 2px solid var(--color-line);
    color: white;
  }

  .CDB-NavSubmenu-status {
    color: var(--color-text-secondary);
  }
}