$search-box-width: 450px;
$dropdown-width: 405px;

$box-background: #2b303b;
$box-foreground: #65737e;
$box-foreground-highlight: #7b5252;

$font-size: 11pt;

body{
  background: #343d46;
  font-size: 2rem;
}
 
/*
  CSS for the Prefixbox Auto-Complete Container
*/

// Boilerplate CSS for the base <section> container
// Note: This code is formatted in SCSS style
.pf-suggestion-container {
  margin: 0; padding: 0;
  padding: 5px;
  padding-top: 0px;
  top: 50px; left: 45px; // Move it underneath and a little to the side of the input control
  z-index: 10000;  // Ensure it is on top
  position: absolute;
  display: none;  // Hidden by default
  box-sizing: border-box;
  
  font-size: $font-size;
  color: $box-foreground;  
  width: $dropdown-width;
  background-color: $box-background;
  border-radius: 0px 0px 5px 5px;
  
  // Class for when the suggestions are shown
  &.open{
     display: block;
  }
  
  // Suggestions are organised in an unordered list
  // this code simply flattens it and removes excess spacing
  ul {
    margin: 0; padding: 0;
    list-style: none;
  }
  
  // Each suggestion item has this class as a top-level
  li.pf-suggestion {
    padding: 2px 0px; // space between suggestions
    width: 100%;
    word-wrap: break-word; // break long words
    white-space: normal;   // allow long text to wrap to second line
    
    // This is the container for each suggestion text
    // I set the default color to the requested highlight color. 
    // This will act as a highlight the matching prefix 
    .pf-suggestion-body-text1 {
      color: $box-foreground-highlight;
    }

    // This color will mask the rest of the suggestion text 
    // meaning everything except the matching prefix. 
    .pf-highlight {
      color: $box-foreground;
    }

    // Each suggestion comes with an optional image and a category 
    // tag, for this demo I am not interested in these so just hide them
    .pf-suggestion-right,
    .pf-suggestion-left {
      display: none;
    }
  }
  
  // When the user selects an item in the auto-complete list
  // I want the selected item to get a white highlighting
  // and all other highlighting should be removed
  .pf-selected {
    color: white!important;

    .pf-suggestion-body-text1{
      color: inherit!important;
    }

    .pf-highlight{
      color: inherit!important;
    }
  } 
}

/*
Look and feel of the demo, has nothing to do with the Prefixbox code
*/
.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

.container-2{
  width: $search-box-width;
  vertical-align: middle;
  white-space:nowrap;
  position:relative;
}

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: $box-background;
  border:none;
  font-size: $font-size;
  float: left;
  color: #262626;
  padding-left: 50px;
  border-radius: 5px;
  color: #fff;
  transition: width .55s ease;
}

.container-2 input#search::-webkit-input-placeholder {
   color: $box-foreground;
}
 
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: $box-foreground;  
}
 
.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: $box-foreground;  
}
 
.container-2 input#search:-ms-input-placeholder {  
   color: $box-foreground;  
}

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 12px;
  z-index: 1;
  color: #4f5b66;
}

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: $search-box-width;
  border-radius: 5px 5px 0px 0px;
}

.container-2:hover input#search{
  width: $search-box-width;
}

.container-2:hover .icon{
  color: #93a2ad;
}