/* Copyright 2012 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* NOTE: If you are using the drop-down style, you must first call
 * MenuButton.createDropDownArrows() to initialize the CSS canvases that
 * contain the arrow images. */

button.menu-button.drop-down {
  background: white url(../images/drop_down_arrow_gray.svg) no-repeat center 4px;
  border: 1px solid rgb(192, 195, 198);
  border-radius: 2px;
  height: 12px;
  margin: 0 5px;
  padding: 0;
  position: relative;
  top: 1px;
  width: 12px;
}

button.menu-button.drop-down:hover {
  background-image: url(../images/drop_down_arrow_black.svg);
  border-color: rgb(48, 57, 66);
}

button.menu-button.drop-down[menu-shown],
button.menu-button.drop-down:focus {
  background-color: rgb(48, 57, 66);
  background-image: url(../images/drop_down_arrow_white.svg);
  border-color: rgb(48, 57, 66);
}

button.menu-button.using-mouse {
  outline: none;
}