@import "ui-variables";

.menu {
  .header-container {
    background-color: @background-color-secondary;
    border-bottom:1px solid @base-border-color;
    padding:8px;
    position: relative;
    input.search {
      border:1px solid darken(@background-color-secondary, 10%);
      background-color:white;
      border-radius:12px;
      padding-left: 10px;
    }
  }

  .footer-container {
    position: relative;
    border-top:1px solid @base-border-color;
  }

  .content-container {
    background: @background-color-secondary;
    border: 1px solid @border-secondary-bg;
    padding: 2px;
    position: absolute;
    width: 100%;
    margin-top: -1px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: @border-radius-small;
  }

  .item {
    display: block;
    padding: 0.5em;
    cursor: pointer;
    color: @text-color;
    background: @background-primary;
    width: 100%;
    overflow: hidden;
  }

  .item.selected, .item:hover {
    text-decoration: none;
    background: @accent-primary;
    color: @text-color-inverse;
  }
}
