/**
* @name Menu
* @category containers
* @component menu
*/

@import '../settings/list-item';
@import '../settings/menu-overlay';
@import '../settings/event-overlay';
@import '../tools/functions/core';
@import '../tools/mixins/border-radius';

@include exports('cui-menu-overlay') {
  .#{$menu-overlay__class}-wrapper {
    display: inline-flex;
  }

  .#{$menu-overlay__class} {
    > .#{$prefix}-event-overlay__children {
      display: flex;
      flex-direction: column;

      > .#{$menu__class} {
        .#{$list-item__class} {
          min-height: $menu-item__height;
          padding: 0 $menu-item__padding;
          border-radius: 0;
        }

        .#{$menu-item__class} {
          &__content {
            overflow: hidden;
            text-overflow: ellipsis;
            flex-grow: 1;
          }

          &__selected-value {
            max-width: $menu-item-selected-value__max-width;
            max-height: 100%;
            padding: $menu-item-selected-value__padding;
            overflow: hidden;
            font-size: $menu-item-selected-value__font-size;
            line-height: $menu-item-selected-value__line-height;
            text-align: right;
            white-space: pre-line;
            opacity: $menu-item-selected-value__opacity;
          }

          &__arrow {
            display: flex;
            padding-left: $menu-item-arrow__padding-left;
            flex-shrink: 0;
          }

          &__header {
            height: $menu-item-header__height;
            font-size: $menu-item-header__font-size;
            opacity: $menu-item-header__opacity;
            cursor: default;


            &:active,
            &.active {
              background-color: transparent;
            }
          }
        }
      }

      .#{$menu-item__class}-container {
        &:first-child {
          .#{$menu-item__class}:first-child {
            > .#{$list-item__class} {
              @include border-top-radius($event-overlay__border-radius);
            }
          }
        }

        &:last-child {
          .#{$menu-item__class}:last-child {
            > .#{$list-item__class} {
              @include border-bottom-radius($event-overlay__border-radius);
            }
          }
        }
      }
    }
  }
}

/**
* @component menu
* @section default
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom cui-menu-overlay">
  <div class="cui-event-overlay__arrow" style="left: 250.93px; top: 684px;"></div>
  <div class="cui-event-overlay__children" style="top: 684px; left: 189px;">
    <div class="cui-menu-content">
      <span class="cui-editable-textfield cui-editable-textfield--left">
        <div role="button" tabindex="0" class="cui-editable-textfield__button">Content Area</div>
      </span>
    </div>
    <div class="cui-menu cui-menu-item-container" aria-label="" role="menubar">
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="true" class="cui-list-item" id="cui-list-item-12" role="menuitem" tabindex="0">
          <div class="cui-menu-item__content">Status</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-14" role="menuitem" tabindex="-1">
          <div class="cui-menu-item__content">Language</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-16" role="menuitem" tabindex="-1">Settings</div>
      </div>
    </div>
  </div>
</div>
*/

/**
* @component menu
* @section sub-menu
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--bottom cui-menu-overlay">
  <div class="cui-event-overlay__arrow" style="left: 250.93px; top: 684px;"></div>
  <div class="cui-event-overlay__children" style="top: 684px; left: 189px;">
    <div class="cui-menu-content">
      <span class="cui-editable-textfield cui-editable-textfield--left"><div role="button" tabindex="0" class="cui-editable-textfield__button">Content Area</div></span>
    </div>
    <div class="cui-menu cui-menu-item-container" aria-label="" role="menubar">
      <div class="cui-menu-item" aria-expanded="true" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item active" id="cui-list-item-31" role="menuitem" tabindex="-1">
          <div class="cui-menu-item__content">Status</div>
          <div class="cui-menu-item__selected-value" title="Out of office until 2:00pm">Out of office until 2:00pm</div>
          <div class="cui-menu-item__arrow">
            <i class="cui-icon icon icon-arrow-right_16" width="16" height="16"></i>
          </div>
        </div>
        <div class="cui-event-overlay cui-event-overlay--right">
          <div class="cui-event-overlay__children" style="top: 741px; left: 435.688px;">
            <div aria-label="Status" role="menu" class="cui-menu-item-container">
              <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="cui-list-item cui-list-item--read-only cui-menu-item__header" id="cui-list-item-36" role="menuitem">Set Do Not Disturb:</div>
              </div>
              <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="cui-list-item disabled" id="cui-list-item-37" role="menuitem" tabindex="-1">1 hour</div>
              </div>
              <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="true" class="cui-list-item" id="cui-list-item-38" role="menuitem" tabindex="0">5 hour</div>
              </div>
              <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false">
                <div aria-current="false" class="cui-list-item" id="cui-list-item-39" role="menuitem" tabindex="-1">8 hour</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-33" role="menuitem" tabindex="-1">
          <div class="cui-menu-item__content">Language</div>
          <div class="cui-menu-item__selected-value" title="English">English</div>
          <div class="cui-menu-item__arrow">
            <i class="cui-icon icon icon-arrow-right_16" width="16" height="16"></i>
          </div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="false"><div aria-current="false" class="cui-list-item" id="cui-list-item-35" role="menuitem" tabindex="-1">Settings</div></div>
    </div>
  </div>
</div>
*/

/**
* @component menu
* @section custom-menu-items
* @html
<div class="cui-event-overlay cui-event-overlay--arrow cui-event-overlay--top cui-menu-overlay">
  <div class="cui-event-overlay__arrow" style="left: 317.555px; top: 756px;"></div>
  <div class="cui-event-overlay__children" style="top: 377px; left: 188.555px;">
    <div class="cui-menu-content">Content</div>
    <div class="cui-menu cui-menu-item-container" aria-label="" role="menubar">
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="true" class="cui-list-item" id="cui-list-item-40" role="menuitem" tabindex="0">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-edit_20"></i>
          </div>
          <div class="cui-list-item__center">Edit space settings</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-42" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-favorite_20"></i>
          </div>
          <div class="cui-list-item__center">Add to favorites</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-44" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-alert_20"></i>
          </div>
          <div class="cui-list-item__center">Notifications</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-46" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-accessories_20"></i>
          </div>
          <div class="cui-list-item__center">Add Integrations &amp; Bots</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-48" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-stored-info_20"></i>
          </div>
          <div class="cui-list-item__center">View space policy</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-50" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-archive_20"></i>
          </div>
          <div class="cui-list-item__center">Archive space</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-52" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-cancel_20"></i>
          </div>
          <div class="cui-list-item__center">Remove space from team</div>
        </div>
      </div>
      <div class="cui-menu-item" aria-expanded="false" aria-haspopup="true">
        <div aria-current="false" class="cui-list-item" id="cui-list-item-54" role="menuitem" tabindex="-1">
          <div class="cui-list-item__left">
            <i class="cui-icon icon icon-exit-room_20"></i>
          </div>
          <div class="cui-list-item__center">Leave space</div>
        </div>
      </div>
    </div>
  </div>
</div>
*/