@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;
    width: 100%;
    margin-top: -1px;
  }

  .item {
    display: block;
    padding-left: @padding-base-horizontal;
    padding-top: @padding-base-vertical;
    padding-bottom: @padding-base-vertical;
    cursor: pointer;
    color: @text-color;
    width: 100%;
    overflow: hidden;

    .primary {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .secondary {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left:5px;
      color:@text-color-very-subtle;
    }
  }

  .item.divider {
    font-weight:@headings-font-weight;
    color: @menu-divider-color;
    font-size: @font-size-small;
    text-transform: uppercase;
    margin-top: 10px;
    pointer-events: none;
  }

  .item.checked {
    background-image:url(./images/menu/checked@2x.png);
    background-size: 16px;
    background-position: right;
    background-repeat: no-repeat;
    background-position-x: 97%;
    margin-right: 20px;
    padding-right: 10%;
  }

  .item.selected.checked, .item.checked:hover {
    background-image:url(./images/menu/checked-selected@2x.png);
  }

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