// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "@blueprintjs/icons/lib/scss/variables";
@import "../../common/mixins";

@import "./common";
@import "./submenu";

/*
Menus

Markup:
<ul class="#{$ns}-menu {{.modifier}} #{$ns}-elevation-1">
  <li>
    <a class="#{$ns}-menu-item #{$ns}-icon-people" tabindex="0">Share...</a>
  </li>
  <li>
    <a class="#{$ns}-menu-item #{$ns}-icon-circle-arrow-right" tabindex="0">Move...</a>
  </li>
  <li>
    <a class="#{$ns}-menu-item #{$ns}-icon-edit" tabindex="0">Rename</a>
  </li>
  <li class="#{$ns}-menu-divider"></li>
  <li>
    <a class="#{$ns}-menu-item #{$ns}-icon-trash #{$ns}-intent-danger" tabindex="0">Delete</a>
  </li>
</ul>

.#{$ns}-large - Large size
.#{$ns}-small - Small size

Styleguide menu
*/

.#{$ns}-menu {
  background: $menu-background-color;
  border-radius: $pt-border-radius;
  color: $pt-text-color;
  list-style: none;
  margin: 0;
  min-width: $menu-min-width;
  padding: $half-grid-size;
  text-align: left;
}

.#{$ns}-menu-divider {
  @include menu-divider();
}

.#{$ns}-menu-item {
  @include menu-item();

  @each $intent, $colors in $menu-item-intent-colors {
    @include menu-item-intent($intent, false, $colors...);
  }

  &::before {
    // support pt-icon-* classes directly on this element
    @include pt-icon();
    margin-right: $menu-item-padding;
  }

  .#{$ns}-large & {
    @include menu-item-large();

    &::before {
      @include pt-icon($pt-icon-size-large);
      margin-right: $menu-item-padding-large;
    }
  }

  .#{$ns}-small & {
    @include menu-item-small();
  }
}

button.#{$ns}-menu-item {
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}

/*
Menu headers

Markup:
<ul class="#{$ns}-menu #{$ns}-elevation-1">
  <li class="#{$ns}-menu-header"><h6 class="#{$ns}-heading">Layouts</h6></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-auto">Auto</button></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-circle">Circle</button></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-grid">Grid</button></li>
  <li class="#{$ns}-menu-header"><h6 class="#{$ns}-heading">Views</h6></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-history">History</button></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-star">Favorites</button></li>
  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-envelope">Messages</button></li>
</ul>

Styleguide menu-header
*/

.#{$ns}-menu-header {
  @include menu-header($heading-selector: "> h6");

  .#{$ns}-large & {
    @include menu-header-large($heading-selector: "> h6");
  }
}

// dark theme
.#{$ns}-dark {
  .#{$ns}-menu {
    background: $dark-menu-background-color;
    color: $pt-dark-text-color;
  }

  .#{$ns}-menu-item {
    @include dark-menu-item();

    @each $intent, $colors in $dark-menu-item-intent-colors {
      @include menu-item-intent($intent, true, $colors...);
    }
  }

  .#{$ns}-menu-divider,
  .#{$ns}-menu-header {
    border-color: $pt-dark-divider-white;
  }

  .#{$ns}-menu-header > h6 {
    color: $pt-dark-heading-color;
  }
}

// #402 support menu inside label
.#{$ns}-label .#{$ns}-menu {
  margin-top: $pt-grid-size * 0.5;
}