// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";
@import "../../common/icons";
@import "../../common/mixins";

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

/*
Menus

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

.pt-large - Large size (only supported on <code>.pt-menu</code>)

Styleguide pt-menu
*/

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

.pt-menu-divider {
  @include menu-divider();
}

.pt-menu-item {
  @include menu-item();
  @include menu-item-intent();

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

  &::before,
  &::after {
    color: $pt-icon-color;
  }

  .pt-menu-item-label {
    color: $pt-text-color-muted;
  }

  &:hover {
    color: inherit;
  }

  &.pt-active,
  &:active {
    background-color: $menu-item-color-active;
  }

  // pt-disable always overrides over styles
  // stylelint-disable declaration-no-important
  &.pt-disabled {
    // override global a:focus styles
    outline: none !important;
    background-color: inherit !important;
    cursor: not-allowed !important;
    color: $pt-text-color-disabled !important;

    &::before,
    &::after,
    .pt-menu-item-label {
      color: $pt-icon-color-disabled !important;
    }
  }
  // stylelint-enable declaration-no-important

  .pt-large & {
    @include menu-item-large();

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

a.pt-menu-item {
  &,
  &:hover {
    text-decoration: none;
  }
}

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

.pt-menu-item-label {
  float: right;
  margin-left: $menu-item-padding;
}

/*
Menu headers

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

Styleguide pt-menu.pt-menu-header
*/

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

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

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

  .pt-menu-item {
    @include menu-item-intent($pt-dark-intent-text-colors);

    &::before,
    &::after {
      color: $pt-dark-icon-color;
    }

    .pt-menu-item-label {
      color: $pt-dark-text-color-muted;
    }

    &:hover {
      &::before,
      &::after {
        color: $white;
      }
    }

    &.pt-active,
    &:active {
      background-color: $dark-menu-item-color-active;
    }

    // pt-disable always overrides over styles
    // stylelint-disable declaration-no-important
    &.pt-disabled {
      color: $pt-dark-text-color-disabled !important;

      &::before,
      &::after,
      .pt-menu-item-label {
        color: $pt-dark-icon-color-disabled !important;
      }
    }
    // stylelint-enable declaration-no-important
  }

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

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

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