.search-container {
  position: relative;
  // margin: 0 10px 10px;
  @include fill();
  transform: translateY(-10px);
  transition: all ease 0.3s;
  opacity: 0;
  pointer-events: none;
  z-index: 111;
  height: 32px;
  // bottom: auto;
  // padding: 3px;

  &.show-content {
    transform: translateY(0);
    pointer-events: all;
    opacity: 1;
    .hide-content {
      // border: 1px solid $themeColor;
      box-shadow: 0 12px 24px rgba(#000, 0.2);
      height: 300px;
    }
  }

  .form-control {
    width: 100%;
    // background-color: rgba(#fafafa, 1);
    // border-color: rgba(#000, 0.3);
    // border: 0;
    color: #333;
    // height: 40px;
    // border-radius: 0;
    height: 100%;
    &:focus {
      border-color: $themeColor;
      // background-color: #FFF;
      // color: #000;
    }
  }

  ::placeholder {
    color: #333;
  }

  .hide-content {
    position: absolute;
    width: 99%;
    height: 0;
    overflow-y: auto;
    color: #333;
    background-color: #FFF;
    // color: #FFF;
    border-radius: 0 0 5px 5px;
    top: 100%;
    transition: all ease 0.2s;
    // border: 1px solid transparent;
    border-top: 0;
    // margin-top: -1px;

    .result-item {
      display: block;
      padding: 8px 10px;
      text-decoration: none;
      cursor: pointer;
      border-bottom: 1px solid #f8f8f8;
      &:hover {
        background-color: rgba(#000, 0.05);
      }
      // text-align: left;
    }
  }
}