/*
 * jQuery UI Menu @VERSION
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu { list-style:none; padding: 0; margin: 0; display:block; outline: none; }
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 6px .4em; line-height: 1.5; zoom: 1; }
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active { margin: -1px; }

.ui-menu li.ui-state-disabled { padding: 0.7em 0.4em 0.5em; margin: .4em 0 .2em; line-height: 1.5; }

/* icon support */
.ui-menu-icons { position: relative; }
.ui-menu-icons .ui-menu-item a { position: relative; padding-#{direction(left)}: 2em; }

/* left-aligned */
.ui-menu .ui-icon { position: absolute; top: .5em; #{direction(left)}: .4em; }

/* right-aligned */
.ui-menu .ui-menu-icon { position: static; float: direction(right); }


.ui-menu .ui-menu-input-group {
  text-transform: uppercase;
  font-weight: bold;
  color: #000;
  @include fontSize(12px);
}

.ui-menu-item span.ui-menu-input-group { padding-#{direction(left)}: 2em; }

.ui-menu-item label { cursor: pointer; }

.ui-menu .ui-corner-all { border-radius: 0; }

$kyle-menu-bg-color: #e6e7e9;
$kyle-menu-border-color: #b0afaf;
$kyle-menu-carat-size: 8px;
$kyle-menu-border-radius: $baseBorderRadius;


// the .ui-menu-carat is the outer border of the carat to make it match the border of the popup
// and the span inside it is the same
.ui-menu-carat, .ui-menu-carat span {
  border-style: solid;
  position: absolute;
  width: 0;
  height: 0; left: 50%;
  content: "";
  border-width: 0px $kyle-menu-carat-size+1px $kyle-menu-carat-size+1px;
  top: -$kyle-menu-carat-size - 1px;
  margin-left: -$kyle-menu-carat-size - 1px;
  border-color: darken($ic-border-light, 3%) transparent;
}
.ui-menu-carat span {
  border-width: 0px $kyle-menu-carat-size $kyle-menu-carat-size;
  top: 1px;
  margin-left: -$kyle-menu-carat-size;
  border-color: $ic-color-light transparent;
}
.carat-bottom {
  .ui-menu-carat, .ui-menu-carat span {
    top: auto;
    bottom: -$kyle-menu-carat-size - 1px;
    border-width: $kyle-menu-carat-size+1px $kyle-menu-carat-size+1px 0;
  }
  .ui-menu-carat span {
    top: auto;
    bottom: 1px;
    border-width: $kyle-menu-carat-size $kyle-menu-carat-size 0;
  }
}
.ui-kyle-menu {
  position: absolute; // take it out of the "flow" so that it pops on top and doesnt push things down
  z-index: 9999;
  margin-top: $kyle-menu-carat-size;
  text-align: direction(left);
  border: 1px solid $ic-border-light;
  box-shadow: 0px 0px 6px rgba(black, 0.1);
  background-color: $ic-color-light;
  font-weight: $ic-font-weight;

  a {
    color: #333;
    padding: $ic-sp/2 $ic-sp;
    min-width: $ic-sp*12;
    line-height: 1.1;
  }
  hr {
    margin: 0;
    height: 0;
    border: 0;
    border-top: 1px solid $ic-border-light;
  }
  // have to use first-of-type instead of :first-child because the carat that gets inserted becomes
  // :first-child but the carat is not an <li>, so this gets the first <li> which is what we want.
  // doesn't work in ie8- but that's ok because neither does the border radius we are trying to fix.
  li:first-of-type a { border-top-#{direction(left)}-radius: $kyle-menu-border-radius; border-top-#{direction(right)}-radius:$kyle-menu-border-radius; }
  li:last-child a { border-bottom-#{direction(left)}-radius: $kyle-menu-border-radius; border-bottom-#{direction(right)}-radius:$kyle-menu-border-radius; }
  .ui-state-focus {
    font-weight: bold !important;
    border: none;

    .ui-icon-radio-on {
      background: url(/images/icon-checkmark-rev.svg) 0 50% no-repeat !important;
      background-size: 14px;
    }
  }
}

.ui-menu-small {
  @include fontSize(11px);
  font-weight: normal;
  white-space: nowrap;
  .ui-state-focus {font-weight: normal; text-shadow: none;}
  .ui-menu-item a {padding: 3px 5px}
}
