$dark-grey:#444444;

.mobile-nav .search{
  padding: 10px;
}

.side-nav{
  .search.empty .search-field{
    max-width: none;
  }
}

.search {
  $compressed-width: 120px;
  $expanded-width: 250px;

  position: relative;
  .search-field {
    color: $dark-grey;
    font-size: 14px;
    padding: 4px 12px;
    line-height: 1.3;
    border-radius: 20px;
    border: 0px;
    width: 100%;
    max-width: $expanded-width;
    transition: 0.2s all;
    -webkit-appearance: textfield;
    background: white;
    .white-bg &{
      border: 1px solid #ddd;  
    }
    &:focus {
      outline: none;
      background: white;
    }
    &::-webkit-input-placeholder{
      color: currentColor;
    }
    &::-moz-placeholder{
      color: currentColor;
    }
  }
  &.empty {
    .search-field {
      max-width: $compressed-width;
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
      &:focus {
        background: white;
        max-width: $expanded-width;
        color: #aaa;
      }
    }
  }
}