/**
* @name Side Nav
* @category layout
* @component side-nav
*/
@import '../settings/colors';
@import '../settings/fonts';

@include exports('cui-side-nav') {
  .#{$prefix}-side-nav {
    max-width: rem-calc(200);
  }

  .#{cui}-side-nav__button {
    padding-left: 0;
    padding-bottom: rem-calc(4);
    margin-top: rem-calc(4);
    margin-bottom: rem-calc(4);
    line-height: rem-calc(24);
    font-size: rem-calc(16);
    border-radius: 0;
    color: $black;
    font-family: $brand-font-regular;
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &:hover {
      background: none;
    }
  }

  .#{cui}-submenu .#{cui}-side-nav__button {
    font-size: rem-calc(14);
  }

  .#{$prefix}-side-nav__title--top .#{cui}-side-nav__button {
    color: $gray-2;
    font-size: rem-calc(12);
    border-bottom: rem-calc(1) solid $black-08;
  }

  .#{$prefix}-side-nav {
    .#{$prefix}-list-item {
      padding: rem-calc(8.5) 0;
      font-size: rem-calc(16);
    }
  }

  .#{cui}-side-nav--expanded .#{cui}-list {
    display: block;
  }

  .#{cui}-side-nav--collapse .#{cui}-list {
    display: none;
  }

  .#{cui}-side-nav__reference {
    &.#{cui}-side-nav--collapse,
    &.#{cui}-side-nav--expanded {
      font-size: rem-calc(14);
    }

    &.#{cui}-side-nav--expanded .#{cui}-list-item {
      font-size: rem-calc(12);
      line-height: rem-calc(16);
      color: $blue-dark;
      height: auto;
    }

    .#{cui}-list {
      padding-left: rem-calc(8);
    }
  }

  .#{$prefix}-submenu {
    > .#{$prefix}-list-item,
    .#{$prefix}-side-nav__title--sub {
      color: $gray-1;
      font-size: rem-calc(14);
    }
  }

  .#{cui}-side-nav__reference-container {
    .#{cui}-submenu, .#{cui}-side-nav {
      overflow: auto;
    }
  }

  .#{cui}-side-nav__reference .#{cui}-list-item {
    font-size: rem-calc(12);
    color: $gray-1;
  }
}


/**
* @component side-nav
* @section default
* @html
<div class="cui-side-nav cui-side-nav--expanded">
  <h3 class="cui-side-nav__title--top">
    <button class="cui-side-nav__button">OVERVIEW</button>
  </h3>
  <div class="cui-list cui-list--vertical cui-list" role="list">
    <a class="cui-list-item" aria-current="true" role="listItem" id="cui-list-302__list-item" title="Platform Introduction"
      href="/containers/list-item">Platform Introduction</a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-302__list-item" title="Bots" href="/containers/list-item">
      Bots
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-302__list-item" title="Widgets"
      href="/containers/list-item">
      Widgets
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-302__list-item" title="Integration"
      href="/containers/list-item">
      Integration
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-302__list-item" title="Guest Issuer"
      href="/containers/list-item">
      Guest Issuer
    </a>
  </div>
</div>
*/


/**
* @component side-nav
* @section expand
* @html
<div class="cui-side-nav cui-side-nav--expanded">
  <h3 class="cui-side-nav__title--sub">
    <button class="cui-side-nav__button">
      Guides
      <i class="cui-icon icon icon-arrow-up_16"></i>
    </button>
  </h3>
  <div class="cui-list cui-list--vertical cui-list" role="list">
    <a class="cui-list-item" aria-current="true" role="listItem" id="cui-list-304__list-item" title="Authentication"
      href="/containers/list-item">
      Authentication
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-304__list-item" title="Admin API"
      href="/containers/list-item">
      Admin API
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-304__list-item" title="Webhooks"
      href="/containers/list-item">
      Webhooks
    </a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-304__list-item" title="Compliance"
      href="/containers/list-item">
      Compliance
    </a>
  </div>
</div>
*/


/**
* @component side-nav
* @section nested
* @html
<div class="cui-side-nav cui-side-nav--expanded">
  <h3 class="cui-side-nav__title--sub">
    <button class="cui-side-nav__button">Reference
      <i class="cui-icon icon icon-arrow-up_16"></i>
    </button>
  </h3>
  <div class="cui-list cui-list--vertical cui-list" role="list">
    <a class="cui-list-item" aria-current="true" role="listItem" id="cui-list-496__list-item" title="Admins" href="/containers/list-item">Admins</a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-496__list-item" title="Devices"
      href="/containers/list-item">Devices</a>
    <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-496__list-item" title="Licenses"
      href="/containers/list-item">Licenses</a>
    <div class="cui-side-nav cui-side-nav--expanded cui-side-nav__reference">
      <h3 class="cui-side-nav__title--sub">
        <button class="cui-side-nav__button">
          Messages
          <i class="cui-icon icon icon-arrow-up_16"></i>
        </button>
      </h3>
      <div class="cui-list cui-list--vertical cui-list" role="list">
        <a class="cui-list-item" aria-current="true" role="listItem" id="cui-list-498__list-item" title="List Messages"
          href="/containers/list-item">List Messages</a>
        <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-498__list-item"
          title="Create a Messages" href="/containers/list-item">Create a Messages</a>
        <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-498__list-item"
          title="Get Message Details" href="/containers/list-item">Get Message Details</a>
        <a class="cui-list-item" aria-current="false" role="listItem" id="cui-list-498__list-item"
         title="Delete a Message" href="/containers/list-item">Delete a Message</a>
      </div>
    </div>
  </div>
</div>
*/