@import "ui-variables";
@import "ui-mixins";

.search-bar {
  position: relative;
  order: 100;
  overflow: visible;
  z-index: 100;
  -webkit-user-select: none;
  width:270px;
  margin-top: (50px - 30px) / 2;
  margin-left: 12px;
  margin-right: 12px;

  .menu .header-container {
    padding:0;
    height:30px;
    background-color: transparent;
    border:none;

    input {
      padding-left:25px;
      width: 100%;
      height: 30px;
    }
    input.empty {
      text-align: center;
    }
    input.empty:focus {
      text-align: left;
    }
  }

  .menu .footer-container {
    border:none;
  }
  .menu .content-container {
    position: absolute;
    z-index: 2;
    width: 100%;

    box-shadow: @standard-shadow;
    background-color: @menu-color;

    .divider {
      font-weight:@headings-font-weight;
      color: @menu-divider-color;
      font-size: @font-size-small;
      text-transform: uppercase;
      margin-top: 10px;
      padding: 4px;
      padding-left: 15px;
    }

    .item {
      padding: 4px;
      padding-left: 15px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .search-container {
    position: relative;

    &.showing-suggestions {
      .suggestions { display: inherit; }
    }
    &.showing-query {
      .clear { display: inherit; }
    }
  }

  .search-accessory {

    &.search {
      position: absolute;
      top: floor(40px - 16px)/2;
      left: @padding-base-horizontal;
    }

    &.clear {
      position: absolute;
      top: floor(40px - 26px)/2;
      color: @input-accessory-color;
      right: @padding-base-horizontal;
      display: none;
    }
  }
}